bootstrap網(wǎng)格系統(tǒng)使用方法解析

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理非常簡(jiǎn)單，僅僅是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、焦作網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

工作原理

1、數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對(duì)齊方式和內(nèi)距(padding)。如：

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

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

<div class="container">
 <div class="row">
   <div class="col-md-4"></div>
   <div class="col-md-8"></div>
 </div>
</div>

3、具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器(.row)的直接子元素

4、通過設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距（margin）來抵消內(nèi)距(padding)的影響

能這媒體查詢實(shí)現(xiàn)：
針對(duì)不同的瀏覽器分辨率，其寬度也不一樣：自動(dòng)、750px、970px和1170px
css源碼：

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 @media (min-width: 768px) {
 .container {
 width: 750px;
 }
 @media (min-width: 992px) {
 .container {
 width: 970px;
 }
 @media (min-width: 1200px) {
 .container {
 width: 1170px;
 }

基本用法

網(wǎng)格系統(tǒng)用來布局，其實(shí)就是列的組合，Bootstrap框架在不同屏幕尺寸使用了不同的網(wǎng)格樣式

1、列組合

列組合簡(jiǎn)單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超12）
實(shí)現(xiàn)列組合方式非常簡(jiǎn)單，只涉及兩個(gè)CSS兩個(gè)特性：浮動(dòng)與寬度百分比。

/*確保所有列左浮動(dòng)*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }

---------------------------------------------------------------------------------
/*定義每個(gè)列組合的寬度（使用的百分比）*/
 .col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

列偏移

我們不希望相鄰的兩個(gè)列緊靠在一起，但又不想使用margin或者其他的技術(shù)手段來。這個(gè)時(shí)候就可以使用列偏移（offset）功能來實(shí)現(xiàn)。使用列偏移也非常簡(jiǎn)單，只需要在列元素上添加類名“col-md-offset-*”(其中星號(hào)代表要偏移的列組合數(shù))，那么具有這個(gè)類名的列就會(huì)向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動(dòng)4個(gè)列的寬度。

<div class="container">
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4">列向右移動(dòng)四列的間距</div>
  <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">列向右移動(dòng)四列的間距</div>
 </div>
</div>

實(shí)現(xiàn)原理非常簡(jiǎn)單，就是利用十二分之一（1/12）的margin-left。然后有多少個(gè)offset，就有多少個(gè)margin-left。

css源碼：

 .col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }

不過有一個(gè)細(xì)節(jié)需要注意，使用”col-md-offset-*”對(duì)列進(jìn)行向右偏移時(shí)，要保證列與偏移列的總數(shù)不超過12，不然會(huì)致列斷行顯示

列排序

列排序其實(shí)就是改變列的方向，就是改變左右浮動(dòng)，并且設(shè)置浮動(dòng)的距離。在Bootstrap框架的網(wǎng)格系統(tǒng)中是通過添加類名“col-md-push-”和“col-md-pull-” (其中星號(hào)代表移動(dòng)的列組合數(shù))。

左邊占4列寬，右側(cè)占8列寬；

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
</div>
-----------------------將這兩個(gè)互換位置--------------------------------------------------
<div class="container">
 <div class="row">
 <div class="col-md-4 col-md-push-8">.col-md-4</div>
 <div class="col-md-8 col-md-pull-4">.col-md-8</div>
 </div>
</div>

// 實(shí)現(xiàn)原理：
.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
 }

列的嵌套

可以在一個(gè)列中添加一個(gè)或者多個(gè)行（row）容器，然后在這個(gè)行容器中插入列（像前面介紹的一樣使用列）。但在列容器中的行容器（row），寬度為100%時(shí)，就是當(dāng)前外部列的寬度。

<div class="container">
 <div class="row">
  <div class="col-md-8">    

   我的里面嵌套了一個(gè)網(wǎng)格
   <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
   </div>

  </div>
  <div class="col-md-4">col-md-4</div>
 </div> 
</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：bootstrap網(wǎng)格系統(tǒng)使用方法解析
文章網(wǎng)址：http://aaarwkj.com/article4/pjciie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、企業(yè)建站、網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、做網(wǎng)站、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

bootstrap網(wǎng)格系統(tǒng)使用方法解析