響應式布局柵格化系統

本文參考來自bootstrap柵格化系統實現
http://getbootstrap.com/css/#grid

Bootstrap柵格化系統

Bootstrap 的柵格化系統采用將頁面布局分為12列,再根據頁面寬度采用預定義類控制模塊占用寬度比例的思想,實現響應式布局。此方法論下的實現可以兼容較多種比例的頁面布局,命名比較規范,多列布局頁面開發值得借鑒;

柵格化系統的工作規范

(1).container(.container-fluid)>.row>.column;采用容器內行(row)列(column)布局方式,.column必須包含在.row中,.row必須包含在.container中;.container可以包含多個.row,.row可以包含多個.column;


布局形式

(2)展示的內容應當放置于.column類中,并且只有.column可以作為.row的子元素;
(3)使用類似于.row .col-xs-4等預定義類,快速創建柵格化布局;
(4)柵格類適用于屏幕寬度大于或等于分界點大小的設備,并且針對小屏幕設備覆蓋柵格化類,比如.col-md-*在.container-fludid寬度≥992px時生效;

媒介分類

Bootstrap將屏幕大小分為4類

/* 屏幕大小小于768px*/
@media (max-width: 767px) { ... }

/*屏幕最小寬度為768px*/
@media (min-width: 768px) { ... }

/*屏幕最小寬度為992px*/
@media (min-width: 992px) { ... }

/*屏幕最小寬度為1200px*/
@media (min-width: 1200px) { ... }

代表屏幕大小的幾個縮寫形式:
xs:extra small 特別窄屏幕,默認指瀏覽器像素寬度小于768px;
sm:small 窄屏幕,默認指瀏覽器像素寬度大于等于768px,通常是平板寬度;
md:middle 中等寬度屏幕,默認值指瀏覽器像素寬度大于等于992px,通常是桌面顯示器,略縮小的情況;
lg:large 大屏幕,默認值指瀏覽器像素寬度大于等于1200px。

實例1:列寬比例展示展示

代碼如下:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" >
    <style type="text/css">

        .row {
            margin-bottom: 20px;
        }

        .row div {
            min-height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .row1 div {
            border: 1px solid #ff0000;
        }

        .row2 div {
            border: 1px solid #00ff00;
        }

        .row3 div {
            border: 1px solid #0000ff;
        }

        .row3 div {
            border: 1px solid #ccad00;
        }

        .row4 div {
            border: 1px solid #ffaf00;
        }
    </style>

</head>
<body>
<div class="row row1">
    <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 row2">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row row3">
    <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 row4">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>
</body>
</html>

預期結果:
.col--1樣式在控制范圍內會使其控制塊寬度為父容器的1/12;
.col-
-8樣式在控制范圍內會使其控制塊寬度為父容器的8/12;
.col--4樣式在控制范圍內會使其控制塊寬度為父容器的4/12;
.col-
-6樣式在控制范圍內會使其控制塊寬度為父容器的6/12;

實際運行結果:

col布局比例

實例1:列寬比例展示展示

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" >
    <style type="text/css">

        .row {
            margin-bottom: 20px;
        }

        .row div {
            min-height: 150px;
            text-align: center;
            line-height: 40px;
        }

        .row1 div {
            border: 1px solid #df24b1;
        }

        #doc-width-info {
            color: #ffaf00;
            font-size: 25px;
            text-align: center;
        }

    </style>

</head>
<body>
<div id="doc-width-info"></div>
<div class="container-fluid">
    <div class="row row1">
        <div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
        <div class="col-sm-4 col-md-3 col-lg-2">.col-sm-4 .col-md-3 .col-lg-2 </div>
        <div class="col-sm-4 col-md-3 col-lg-8">.col-sm-4 .col-md-3 .col-lg-8 </div>
        <div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
    </div>
</div>
</body>
<script>
    var divDocWith = document.getElementById("doc-width-info");
    var showDocWidth = function () {
        divDocWith.innerHTML = "文檔寬度:" + document.body.scrollWidth + 'px';
    }
    window.onload = function () {
        showDocWidth();
    }
    window.onresize = function () {
        showDocWidth();
    }
</script>
</html>

預期結果:
(1)container≥1200px(lg):4列布局1:2:8:1;
(2)container≥992px && container<1200px(md):3:3:3:3
(3)container≥768px && container<991px(sm):2:4:4:2
(3)container<768px(xs):div 默認display:block

實際運行結果:

lg 1:2:8:1;
md 3:3:3:3
sm 2:4:4:2
xs 默認布局

總結

代碼可copy來運行,從運行結果可看出與預期一致,bootstrap有一套比較規范的布局流,使整個頁面的布局行為保持一致,前端同學在實際開發中可以借鑒;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容