目標

目標一、理解什么是柵格布局

目標二、掌握柵格布局具體應用

目標三、掌握BootStrap通用CSS樣式(排版、代碼、代碼、表單、按鈕、圖片、輔助類、響應式工具)

內容

一、BootStrap全局CSS之 - 柵格系統實例

1.1 柵格系統實例

實戰前的理論準備

通過下面的截圖可以比較清楚的來查看Bootstrap的柵格系統是如何在多種不同的移動設備上面進行工作的。

從上面的截圖可以看出來，Bootstrap針對不同尺寸的屏幕(包括手機、平板、PC等等)設置了不同的樣式類，這樣讓開發人員在開發時可以有更多的選擇。根據我的理解：如果在一個元素上使用多個不同的上面的樣式類，那么元素會根據在不同尺寸選擇最合適(匹配最理想的)的樣式類。簡單的舉例進行說明：比如在一個元素上我們使用了兩個樣式類：.col-md-和.col-lg。可以對照上面的截圖來看

第一種情況：尺寸 >= 1200px;那么會選擇.col-lg。

第二種情況：尺寸 >= 992px 并且尺寸<1200px;那么會選擇.col-md。

第三種情況如果尺寸<992px;那么這兩個樣式類都將不會作用于元素上。

學習BootStrap柵格不像我們想像的那么難，下面我們就通過一些實例快速上手：

實例1 從堆疊到水平排列

使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的(超小屏幕到小屏幕這一范圍)，在桌面(中等)屏幕設備上變為水平排列。所有"列(column)必須放在 " .row 內。

代碼如下：

.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6

效果如下：

實例2 流式布局容器

將最外面的布局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格布局轉換為 100% 寬度的布局。

代碼如下：

...

實例3 移動設備和桌面屏幕

是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。請看下面的實例，研究一下這些是如何工作的

代碼如下：

.col-xs-12 .col-md-8.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6 .col-md-4.col-xs-6.col-xs-6

效果如下：

實例4 多余的列(column)將另起一行排列

如果在一個 .row 內包含的列(column)大于12個，包含多余列(column)的元素將作為一個整體單元被另起一行排列。

代碼如下：

.col-xs-9.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit..col-xs-6
Subsequent columns continue along the new line.

效果如下：

實例5 列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距(margin)。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列(column)的寬度。

代碼如下：

.col-md-4.col-md-4 .col-md-offset-4.col-md-3 .col-md-offset-3.col-md-3 .col-md-offset-3.col-md-6 .col-md-offset-3

效果如下：

實例6 嵌套列

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

代碼如下：

Level 1: .col-sm-9

Level 2: .col-xs-8 .col-sm-6

Level 2: .col-xs-4 .col-sm-6

效果如下：

實例7 列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列(column)的順序。

代碼如下：

.col-md-9 .col-md-push-3.col-md-3 .col-md-pull-9

效果如下：

1.2、小結

總結

以上是生活随笔為你收集整理的bootstrap 一排5个_BootStrap从基础到项目实战_第1季_03章_02_CSS样式栅格系统实例的全部內容，希望文章能夠幫你解決所遇到的問題。

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