最經常使用前端框架BootStrap——柵格系統

時間 2019-11-13

標籤經常使用前端框架 bootstrap 柵格系統欄目 Bootstarp 简体版

原文原文鏈接

前言css

　 Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。html

　做爲一個前端程序員，響應式網站能夠說使咱們接觸最先，也是最多的一類。BootStrap的柵格系統就是爲了方便咱們設計響應式而生的！！柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。前端

1、柵格系統工做原理

要明白在使用一個框架時，瞭解其工做原理是很重要的，因此，先帶你們看一下其工做原理；程序員

一、「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。bootstrap

舉個栗子；框架

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>、
 6         <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
 7         <style type="text/css">
 8             .row div{
 9                 border: solid 1px red;
10                 background-color: blueviolet;
11                 height: 100px;
12                 text-align: center;
13             }
14         </style>
15     </head>
16     <body>
17         <div class="container">
18             <div class="row">
19                 <div class="col-lg-4 col-sm-6">第一</div>
20                 <div class="col-lg-8 col-sm-6">第二</div>
21                 <div class="col-lg-4 col-sm-12">第三</div>
22             </div>
23 
24         </div>
25     </body>
26 </html>

結果：工具

至於.container-fluid （100% 寬度），顧名思義，小編就不舉例子了；佈局

二、經過「行（row）」在水平方向建立一組「列（column）」。你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。網站

三、相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。ui

四、經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding；

五、柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列能夠使用三個 .col-xs-4 來建立。若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

在上慄中，三個div在同一行中，只不過col-lg中，列數和大於12；若是把div改成col-lg-4；

1 <div class="row">
2     <div class="col-lg-4 col-sm-6">第一</div>
3     <div class="col-lg-4 col-sm-6">第二</div>
4     <div class="col-lg-4 col-sm-12">第三</div>
5 </div>

結果：

2、柵格系統的基本語法

瞭解其工做原理，接下來帶你們看一下其基本語法；

2.1媒體查詢

在響應式網站的編譯中，媒體查詢都是最重要的一部分；若是不進行媒體查詢，如何進行響應式？

在柵格系統中，一般使用如下媒體查詢（media query）來建立關鍵的分界點閾值。

 1 /* 超小屏幕（手機，小於 768px） */
 2 /* 沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
 3 
 4 /* 小屏幕（平板，大於等於 768px） */
 5 @media (min-width: @screen-sm-min) { ... }
 6 
 7 /* 中等屏幕（桌面顯示器，大於等於 992px） */
 8 @media (min-width: @screen-md-min) { ... }
 9 
10 /* 大屏幕（大桌面顯示器，大於等於 1200px） */
11 @media (min-width: @screen-lg-min) { ... }

我想大家也發現了一個問題，在柵格系統中，屏幕寬度小於768px沒有任何媒體查詢相關的代碼，由於這在 Bootstrap 中是移動設備優先；

2.2柵格係數

在柵格系統中，咱們一般經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。

舉個栗子：

 1 <div class="row">
 2      <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
 3     <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 4 </div>
 5 <div class="row">
 6     <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 7     <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 8 
 9     <div class="clearfix visible-xs-block"></div>
10     <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
11 </div>

結果：

2.3列偏移

使用 .col-md-offset-* 類能夠將列向右側偏移。這些類實際是經過使用 * 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

舉例：

 1 <div class="container">
 2             
 3     <div class="row">
 4              <div class="col-md-4">.col-md-4</div>
 5         <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
 6     </div>
 7     <div class="row">
 8         <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 9         <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
10     </div>
11     <div class="row">
12         <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
13     </div>
14 </div>

結果：

2.4嵌套列

爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿12列）。

舉例：

 1 <div class="container">
 2             
 3             <div class="row">
 4               <div class="col-sm-9">
 5                 Level 1: .col-sm-9
 6                 <div class="row">
 7                   <div class="col-xs-8 col-sm-6">
 8                     Level 2: .col-xs-8 .col-sm-6
 9                   </div>
10                   <div class="col-xs-4 col-sm-6">
11                     Level 2: .col-xs-4 .col-sm-6
12                   </div>
13                 </div>
14               </div>
15             </div>
16         </div>

結果：

2.5響應式列重置

在使用柵格系統的時候，或許會遇到這種問題：在某些閾值時，某些列可能會出現比別的列高的狀況。爲了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

 1 <div class="row">
 2   <div class="col-xs-6 col-sm-3" id="div">.col-xs-6 .col-sm-3</div>
 3   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 4 
 5 
 6   <div class="clearfix visible-xs-block"></div>
 7 
 8   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 9   <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
10 </div>

結果：

2.6列排序

經過使用 .col-md-push-* 和 .col-md-pull-* 類就能夠很容易的改變列（column）的順序。

舉例：

1 <div class="container">
2             
3             <div class="row">
4               <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
5               <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
6             </div>
7         </div>