Flex佈局和Bootstrap佈局二者的比較

時間 2020-06-20

原文原文鏈接

在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的佈局方式

聲明的方式以下css

     .Grid {
            display: flex;
        }

        .Grid-cell {
            flex: 1;
            text-align: center;
            margin:10px;
            
        }

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

 <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)jquery

Flex比Bootstrap的佈局適應性更強，由於flex是基於靈活佈局，而Bootstrap是自定義寬度佈局，當刪除元素時這些顯得尤其明顯。bootstrap

Flex佈局和Bootstrap二者相同的設計理念

一、內部的孩子節點無margin，元素之間的空隙用padding和border進行間隔，以及box-sizding:bording-box進行寬高的界定。svg

二、二者都完美適配手機。佈局

可是flex 存在嚴重問題，一行放4個，可是不夠4個有時候不可以自適應，也要求剩餘1部分。flex

bootstrap自適應能力不如flex佈局。 spa

通過了很長時間。咱們發現了 flex佈局有很強的優越性，而bootstrap不行了。設計

一、abc a固定，c固定，b要進行自適應。使用flex:13d

二、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。