本篇主要包括：

■? Grid簡介
■? 應用Grid
■? Multiple Grids

?

? Grid簡介

Bootstrap中，把頁面分成12等份，這就是所謂的Grid。

?

在Bootstrap中，用類名控制，這些類型遵循".col-xx-6"類似的形式。

?

2個6就占滿整個頁面。所以，類名最后面的數字表示要占幾個格子。

?

又比如，3個4也占滿整個頁面。

?

又比如，4個3也占滿整個頁面。

?

又比如，6個2也占滿整個頁面。

?

另外，類似".col-xx-10 .col-xx-offset-2"這樣的類名，offset表示偏移，2表示向右偏移2個單元格。

以上值得注意的是：在倒數第二行，當把".col--xx-3"放在".col-xx-3 .col-xx-offset-2"之后的時候，由于超過了12個單元格的大小，".col--xx-3"會自動跑到下一行的最開頭。

?

? 應用Grid

id為body的section如何應用Grid呢？
→在index.html中，給id為body的section加上class="container"屬性
→給id為main的section加上class="col-md-8"屬性
→給id為sidebar的section加上class="col-md-4"屬性

如何讓header和footer部分也應用Grid呢？
→去掉id為page的div的class="container"屬性，變為：<div id="page">
→給header加上class="container"屬性，變為：<header class="container">
→給footer加上class="container"屬性，變為：<footer class="container">

以上，header, body, footer部分都應用了Grid，body的main部分占8個單元格，body的sidebar部分占4個單元格。

?

so far so good。但是，如果我們把瀏覽器的寬度縮小到像智能手機屏幕般大小，一些不和諧的方面呈現了出來：

?

比如，本來一行的標題撐成了2行：

?

比如，本來可以完整呈現的圖片，現在需要滑動水平滾動條才可以窺其全貌：

還比如，原先在右邊的部分，被擠到了下方，等等。

如何解決這些問題呢？

?

? Multiple Grids

Multiple Grids的意思是：一個頁面元素可以有多個表示單元格大小的類名。不同的頁面寬度，啟用不同的類。

?

在Bootstrap 3中，
".col-lg-xx"表示頁面寬度>=1200像素。
".col-md-xx"表示頁面寬度>=992像素。
".col-sm-xx"表示頁面寬度>=768像素。
".col-xs-xx"表示頁面寬度<768像素。

?

我們可以為一個html元素賦予多個類名，區分地表示，在ld情況下占幾個單元格，在md情況下占幾個單元格,等等。

?

假設我們需要考慮sm的情況，即面寬度>=768像素的情況。
→在id為main的section中，為class增加col-sm-9
→在id為sidebar的sectioin中，為class增加col-sm-3

?

現在，把頁面寬度調整到大概800像素的大小。

可見，這時候，正如之前設置的，id為main的section占了9個單元格，id為sidebar的sectioin占了3個單元格。

接著，我們再考慮xs的情況，即頁面寬度<768像素的情況。
→在id為main的section中，為class增加col-xs-6
→在id為sidebar的sectioin中，為class增加col-xs-6

?

現在，把頁面寬度調整到大概590像素的大小。

可見，這時候，正如之前設置的，id為main的section占了6個單元格，id為sidebar的sectioin占了6個單元格。

?

但是，當頁面寬度<768像素的時候，把左右2邊都設置成占6個單元格的做法，不太可能出現在實際項目中，以上這么做只是為了演示。我們還需要把這種情況對應的類名刪除。回到如下的狀態：

參考資料：WilderMinds??

?

“Bootstrap 3之美”系列類包括:

Bootstrap 3之美01-下載并引入頁面

Bootstrap 3之美02-Grid簡介和應用

Bootstrap 3之美03-獨立行,文字環繞,圖片自適應,隱藏元素

Bootstrap 3之美04-自定義CSS、Theme、Package

Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form

Bootstrap 3之美06-Page Header、Breadcrumbs、Dropdowns、Button Dropdowns、用Button和Dropdowns模擬Select、Input Groups、Thumbnails、Panels、Wells

Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

?

總結

以上是生活随笔為你收集整理的Bootstrap 3之美02-Grid简介和应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。