摘要：Bootstrap 為我們提供了一套響應式、移動設備優先的流式柵格系統，合理的使用柵格系統將會使得網站頁面布局變得更加簡單，在設置了媒體查詢之后，響應式網站也無需再單獨寫了。接下來我以Bootstrap的中文官網首頁為模板進行展示其柵格布局的使用方法以及相關知識點。相信在看完這篇文章之后，你完全可以輕松使用柵格布局。
網站效果圖如下所示：
PC版：
移動版:
1、柵格系統（布局）
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin用於生成更具語意的布局。
進一步的講，網格系統的實現原理也很簡單，它是通過定義容器大小，平分12份（默認），再調整內外邊距，最后結合媒體查詢，就制作出了強大的響應式網格系統。
2、簡介
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。下面就介紹一下 Bootstrap 柵格系統的工作原理：
- “行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
- 通過“行（row）”在水平方向創建一組“列（column）”。
- 你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
- 類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
- 通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding， 也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
- 負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
- 柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
- 如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
- 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 並且針對小屏幕設備覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。
3、媒體查詢
在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建
關鍵的分界點閾值。
/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... } 我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內。 @media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
4、柵格參數
通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。
5、實例：從堆疊到水平排列
使用單一的一組
.col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一范圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。
<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>//中等屏幕8列 <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>
實例：流式布局容器
將最外面的布局元素
.container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。
<div class="container-fluid">
<div class="row"> ... </div>
</div>
實例：手機、平板、桌面
在上面案例的基礎上，通過使用針對平板設備的
.col-sm-* 類，我們來創建更加動態和強大的布局。
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- 可選:如果它們的內容與高度不匹配，可以清除XS cols -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
實例：多余的列（column）將另起一行排
如果在一個
.row 內包含的列（column）大於12個，包含多余列（column）的元素將作為一個整體單元被另起一行排列。
代碼如下
<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>
6、列偏移
使用
.col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
代碼如下：
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
7、綜合案例展示:
在學習過上面的相關知識點之后，我們就可以利用BootStrap的柵格布局來制作一個響應式網站了，接下來我們以BootStrap的中文官網首頁模板來練習下所學的知識點：
Part-1 Html 結構代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap中文文檔</title> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="icon" href="img/favicon.ico" /> <link rel="stylesheet" href="Sass/BootStrap中文文檔.css" /> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">起步</a></li> <li><a href="#">全局 CSS 樣式</a></li> <li><a href="#">組件</a></li> <li><a href="#">JavaScript 插件</a></li> <li><a href="#">定制</a></li> <li><a href="#">網站實例</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Bootstrap中文網</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h1>B</h1> <p>Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。</p> <p><a class="btn btn-default" href="#" role="button">下載BootStrap</a></p> <p class="version">當前版本： v3.3.7 | 文檔更新於：2017-04-24</p> </div> </div> <section class="container-fluid introduce" > <h1>為所有開發者、所有應用場景而設計。</h1> <p>Bootstrap 讓前端開發更快速、簡單。所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。</p> <hr /> <div class="row"> <div class="col-sm-4"> <img src="img/sass-less.png" /> <h2>預處理腳本</h2> <p>雖然可以直接使用 Bootstrap 提供的 CSS 樣式表，不要忘記 Bootstrap 的源碼是基於最流行的 CSS 預處理腳本 - <a href=""> Less</a> 和 <a href=""> Sass</a> 開發的。你可以采用預編譯的 CSS 文件快速開發，也可以從源碼定制自己需要的樣式。</p> </div> <div class="col-sm-4"> <img src="img/devices.png" /> <h2>一個框架、多種設備</h2> <p>你的網站和應用能在 Bootstrap 的幫助下通過同一份代碼快速、有效適配手機、平板、PC 設備，這一切都是 CSS 媒體查詢（Media Query）的功勞。</p> </div> <div class="col-sm-4"> <img src="img/components.png" /> <h2>特性齊全</h2> <p>Bootstrap 提供了全面、美觀的文檔。你能在這里找到關於 HTML 元素、HTML 和 CSS 組件、jQuery 插件方面的所有詳細文檔。</p> </div> </div> <hr /> <p>Bootstrap 是完全開源的。它的代碼托管、開發、維護都依賴 GitHub 平台。</p> <a href="" class="btn btn-default">查看 GitHub 項目主頁</a> </section> <hr /> <section class="container introduce"> <h1>基於 Bootstrap 構建的網站</h1> <p>全球數以百萬計的網站都是基於 Bootstrap 構建的。你可以先參觀一下我們提供的 <a href="">實例精選</a> 或者看一看我們粉絲的網站吧。</p> <hr /> <div class="row"> <div class="col-xs-6 col-sm-3"> <img src="img/34091ac7072297a889fe986b0238e.png" /> </div> <div class="col-xs-6 col-sm-3"> <img src="img/9aa20712a7dba02b00e73db495950.png" /> </div> <div class="col-xs-6 col-sm-3"> <img src="img/aecc20901cc436b5cd10911302e0b.png" /> </div> <div class="col-xs-6 col-sm-3"> <img src="img/f9c2f01fad1f23574156e0577a06c.jpg" /> </div> </div> <hr /> <p> 我們在“優站精選”里展示了許多精美的 Bootstrap 網站。</p> <a href="" class="btn btn-default">逛一逛“優站精選”</a> </section> <footer class="footer"> <div class="container"> <ul> <li> <a>GitHub 倉庫</a> </li> <li> <a>實例</a> </li> <li> <a>優站精選 <a> </li> <li> <a>關於</a> </li> </ul> <p> Designed and built with all the love in the world by<a href=""> @mdo and @fat.</a> Maintained by the <a href="">core team </a> with the help of <a href="">our contributors</a> . </p> <p>本項目源碼受 <a href="">MIT</a> 開源協議保護，文檔受 <a href=""> CC BY 3.0</a> 開源協議保護。</p> </div> </footer> <script src="../05-JQuery/js/jquery-3.1.1.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> </body> </html>
Part-2 Scss 樣式代碼：
@charset "utf-8";
*{
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
$purple:#6f5499;
.navbar-default{
background-color: white;
border: hidden;
color: $purple;
margin-bottom: 0px;
a{
color: #563D90 !important;//提高優先級
}
li:hover{
background-color: #F9F9F9;
}
.navbar-toggle{
border: hidden;
.icon-bar{
background-color: $purple;
}
}
}
.jumbotron{
background-color: $purple;
color: #FFFFFF;
background: linear-gradient(to bottom,#563d7c 0,$purple 100%);//顏色漸變公式
// height: 411px;
box-sizing: content-box;
padding: 80px 0px;
h1{
width: 142px;
height: 142px;
font-size: 108px;
border: 1px solid #FFFFFF;
border-radius: 15%;
text-align: center;
line-height: 142px;
margin: 0 auto;
}
h1+ p{
font-size: 30px;
width: 83%;
text-align: center;
margin: 30px auto;
}
.btn-default{
background-color: rgba(0,0,0,0);
width: 201px;
font-size: 20px;
color: #FFFFFF;
text-align: center;
line-height: 58px;
padding: 0px;
display: block;
margin: 0 auto;
&:hover{
background-color: #FFFFFF;
color: $purple;
}
}
.version{
color: #9783b9;
font-size: 14px;
text-align: center;
}
}
.introduce{
margin-top: 80px;
>h1{
text-align: center;
font-size: 40px;
color: #333;
}
>p{
width: 80%;
color: #555555;
font-size: 21px;
text-align: center;
margin: 10px auto;
font-weight: lighter;
}
>hr{
width: 100px;
margin: 40px auto;
}
.col-sm-4{
img{
width: 100%;
}
h2{
font-size: 24px;
color: #333333;
text-align: center;
}
p{
font-size: 16px;
color: #555555;
line-height: 1.5;
text-align: center;
}
}
.col-sm-3{
padding: 1px;
img{
width: 100%;
}
}
.btn-default{
border: 1px solid $purple;
color: $purple;
padding: 10px 16px;
font-size: 18px;
display: block;
line-height: 1.333333;
margin: 20px auto;
width: 200px;
&:hover{
background-color: $purple;
color: white;
}
}
}
@media screen and (max-width:992px){
.navbar-right{
display: none;
}
.jumbotron{
h1+ p{
font-size: 24px;
}
}
}
.footer{
padding: 50px 0px;
margin-top: 20px;
background-color: #2a2730;
a{
color: white;
}
ul{
padding: 0px;
list-style: none;
display: flex;
justify-content: flex-start;
li{
margin: 0px 10px;
font-weight: normal;
font-size: 18px;
}
li:first-of-type{
margin: 0px;
margin-right: 10px;
}
}
p{
color: #99979c;
margin: 0px;
}
}
@media screen and (max-width:768px){
.navbar-right{
display: block;
}
.jumbotron{
padding: 30px;
h1+ p{
font-size: 20px;
}
}
.introduce{
padding: 0px;
margin: 40px;
.col-sm-4{
margin: 0 -10px;
}
>p{
font-size:30px;
}
}
.footer{
ul{
justify-content: center;
}
p{
text-align: center;
margin-bottom: 10px;
}
}
}
@media screen and (max-width:480px){
.jumbotron{
padding: 30px;
.btn-default{
width: 100%;
}
}
}
如有疑問，歡迎指正！