首頁技術(shù)文章正文

bootstrap布局(一)柵格系統(tǒng)

更新時(shí)間:2018年12月19日15時(shí)27分來源:傳智播客瀏覽次數(shù):

【簡介】

Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

【引入文件】

需要引入的文件有bootstrap的css樣式文件。以為bootstrap框架的柵格系統(tǒng)

[HTML] 純文本查看復(fù)制代碼

1	`<link` `rel="stylesheet"` `href="lib/css/bootstrap.css">`

【柵格系統(tǒng)的原理】

網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了 Bootstrap 網(wǎng)格系統(tǒng)是如何工作的：

1.行必須放置在.container class 內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。

2. 使用行來創(chuàng)建列的水平組。

3. 內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素。

4. 預(yù)定義的網(wǎng)格類，比如.row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類可用于更多語義布局。

5. 列通過內(nèi)邊距（padding）來創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過 .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移。

6. 網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個(gè)可用的列來創(chuàng)建的。例如，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4。

根據(jù)媒體查詢來適配不同的屏幕設(shè)備

[CSS] 純文本查看復(fù)制代碼

/* 超小設(shè)備（手機(jī)，小于 768px） */
/* Bootstrap 中默認(rèn)情況下沒有媒體查詢 */
 
/* 小型設(shè)備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
 
/* 中型設(shè)備（臺(tái)式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }
 
/* 大型設(shè)備（大臺(tái)式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

【網(wǎng)格選項(xiàng)】

下表總結(jié)了 Bootstrap網(wǎng)格系統(tǒng)如何跨多個(gè)設(shè)備工作：

【基本結(jié)構(gòu)與效果】

(1) 數(shù)據(jù)行.row 必須包含在容器.container中, 以便賦予核實(shí)的對(duì)齊方式和內(nèi)間距設(shè)置

[HTML] 純文本查看復(fù)制代碼

1

2

3

4

5

<div class="container">
        <div class="row"></div>
</div>

(2) 在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)，比如12

注意：bootstrap的柵格系統(tǒng)是向上兼容的，也就是說例如col-xs-6適用所有屏幕,col-md-4適用中屏幕及更大，但是不適用與sm屏幕和xs超小屏幕

[HTML] 純文本查看復(fù)制代碼

<div class="container">
      <div class="row">
      <!-- 需求： 超小屏幕768下： div 12等分顯示    
                  小屏幕768~992下： div 6等分顯示
                  中等屏幕992~1200下： div 4等分顯示
                  大屏幕>1200下： div  2等分顯示
      -->
        <div class="col-xs-12  col-sm-6  col-md-4  col-lg-2">1</div>
      </div>
    </div>

2等分

4等分

6等分

12等分

（3）列偏移

col-xs-offset-3 向右偏移三格

[HTML] 純文本查看復(fù)制代碼

1

2

3

4

5

6

7

<div class="row">
            <div class=" col-xs-3 col-xs-offset-3">col-xs-3</div>
            <div class=" col-xs-2 col-xs-offset-2">col-xs-2</div>
        </div>