在Bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。所以flex布局来协助。

bootstrap的布局方式

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

<div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

  <div class="col-md-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div>

</div>
<div class="row">为父容器，class声明自己在容器中占据几个。

Flex的布局方式

声明的方式如下

     .Grid {

            display: flex;

        }

        .Grid-cell {

            flex:;

            text-align: center;

            margin:10px;

        }

在html代码中，添加css的引用

 <div class="Grid">

        <div class="Grid-cell">

        <svg id="fillgauge2" width="100%" height="200" onclick="gauge2.update(NewValue());"></svg>

<label>CPU占有率</label>

        </div>

        <div class="Grid-cell">

            <svg id="fillgauge3" width="100%" height="200" onclick="gauge3.update(NewValue());"></svg>

            <label>CPU占有率</label>

        </div>

        <div class="Grid-cell"><svg id="fillgauge4" width="100%" height="200" onclick="gauge4.update(NewValue());"></svg>

<label>CPU占有率</label></div>

        <div class="Grid-cell"><svg id="fillgauge5" width="100%" height="200" onclick="gauge5.update(NewValue());"></svg>

<label>CPU占有率</label></div>

        <div class="Grid-cell"><svg id="fillgauge6" width="100%" height="200" onclick="gauge6.update(NewValue());"></svg>

<label>CPU占有率</label></div>

    </div>

<div class="Grid"> 中有5个层，<div class="Grid-cell">，这5个层flex=1，然后每个层占得比例为 1/(1+1+1+1+1)

Flex比Bootstrap的布局适应性更强，因为flex是基于灵活布局，而Bootstrap是自定义宽度布局，当删除元素时这些显得尤为明显。

Flex布局和Bootstrap两者相同的设计理念

1、内部的孩子节点无margin，元素之间的空隙用padding和border进行间隔，以及box-sizding:bording-box进行宽高的界定。

2、两者都完美适配手机。

但是flex 存在严重问题，一行放4个，但是不够4个有时候不能够自适应，也要求剩余1部分。

 bootstrap自适应能力不如flex布局。 

经过了很长时间。我们发现了 flex布局有很强的优越性，而bootstrap不行了。

1、abc a固定，c固定，b要进行自适应。使用flex:1

2、flex不受margin-left 和margin-right的影响。而bootstrap对这块支持的特别惨。

结合京东顶部的设计。

仿照京东我们自己也做了一个。

我们提供如下的代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

    <script src="Scripts/jquery-3.4.1.min.js"></script>

    <script src="Scripts/bootstrap.min.js"></script>

    <link href="Reset.css" rel="stylesheet" />

    <link href="Content/octicons.css" rel="stylesheet" />

    <style>

        #d1 {

            height: 50px;

            line-height: 50px;

            background-color: aqua;

            color: cadetblue;

            display: flex;

        }

            #d1 .left {

                height: 50px;

                line-height: 50px;

                float: left;

                padding-left: 10px;

            }

            #d1 .center {

                flex: 1;

                margin-left: 20px;

                margin-right: 20px;

                height: 50px;

                line-height: 50px;

            }

            #d1 .right {

                height: 50px;

                line-height: 50px;

                float: right;

                padding-right: 10px;

            }

    </style>

</head>

<body>

    <div id="d1">

        <div class="left ">

            扫码<i class="octicon octicon-alert"></i>

        </div>

        <div class="center">

            <input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px;

 padding-left: 20px;

" placeholder="请您输入......" />

        </div>

        <div class="center" style="flex:2">

            <input id="Text1" type="text" class="form-control form-control-sm" style="display:inline;border-radius:20px;

 padding-left: 20px;

" placeholder="请您输入......" />

        </div>

        <div class="right">

            城市列表<i class="octicon octicon-bold"></i>

        </div>

    </div>

</body>

</html>

Flex布局和Bootstrap布局两者的比较的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  3. 前端入门24-响应式布局（BootStrap）

    声明 本篇内容摘抄自以下两个来源: BootStrap中文网 感谢大佬们的分享. 正文-响应式布局(BootStrap) 这次想来讲讲一个前端开发框架:BootStrap BootStrap 目前已经 ...

  4. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  5. BootStrap布局案例

    BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...

  6. Bootstrap 布局

    bootstrap提供的布局主要有两种,固定布局和流动布局. Bootstrap 固定布局 用法 <body> <div class="container"> ...

  7. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  8. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  9. 响应式布局与bootstrap框架

    原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...

随机推荐

  1. 【题解】 bzoj3450 JoyOI1952 Easy （期望dp）

    题面戳我 Solution 期望的题目真心不太会 定义状态\(f[i]\)表示到第\(i\)期望长度,\(dp[i]\)表示期望分数 如果上一步的持续\(o\)长度为\(L\),那么贡献是\(L^2\ ...

  2. 自学Linux Shell2.1-进入shell命令行

    点击返回 自学Linux命令行与Shell脚本之路 2.1-进入shell命令行 进入文本命令行界面(CLI)两种方法: 控制台终端 图形化终端 1. 通过Linux控制台终端访问CLI 按下Ctrl ...

  3. 【BZOJ2159】Crash的文明世界（第二类斯特林数，动态规划）

    [BZOJ2159]Crash的文明世界(第二类斯特林数,动态规划) 题面 BZOJ 洛谷 题解 看到\(k\)次方的式子就可以往二项式的展开上面考,但是显然这样子的复杂度会有一个\(O(k^2)\) ...

  4. 【BZOJ1558】等差数列（线段树）

    [BZOJ1558]等差数列(线段树) 题面 BZOJ 题解 可以说这道题已经非常毒瘤了 怎么考虑询问操作? 如果直接将一段数分解为等差数列? 太麻烦了.... 考虑相邻的数做差, 这样等差数列变为了 ...

  5. CAN总线中节点ID相同会怎样？

    CAN-bus网络中原则上不允许两个节点具有相同的ID段,但如果两个节点ID段相同会怎样呢? 实验前,我们首先要对CAN报文的结构组成.仲裁原理有清晰的认识. 一.CAN报文结构 目前使用最广泛的CA ...

  6. Java -- JDBC 学习--使用 DBUtils

    Apache—DBUtils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdb ...

  7. HDU 4292 Food （网络流，最大流）

    HDU 4292 Food (网络流,最大流) Description You, a part-time dining service worker in your college's dining ...

  8. C# 随机四位数验证码

    string str ="abcdefghigklmnopqrstuvwxyzABCDEFJHIGKLMNOPQRSTUVWXYZ1234567890"; while(true){ ...

  9. Persits.Jpeg CMYK-to-RGB

    这几天发现有几个用户上传的图片显示一个“红叉叉”,用迅雷下载一看,原来图片的“模式”是CMYK,这样的模式是不能在IE中正常显示的. 我想起能不能用程序自动转换呢? 在网上看到利用Persits.Jp ...

  10. 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看

    scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...