bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹了bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)從2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元靜樂(lè)做網(wǎng)站,已為上家服務(wù),為靜樂(lè)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份，在使用的時(shí)候可以根據(jù)實(shí)際情況重新編譯LESS/SASS源碼來(lái)修改12這個(gè)數(shù)值。bootstrap框架的網(wǎng)格系統(tǒng)工作原理：

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

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

2、在行（.row）中可以添加列（.column），但列數(shù)之和不能超過(guò)平分的總列數(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、通過(guò)設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距，然后通過(guò)為第一列和最后一疊設(shè)置負(fù)值的外距（margin）來(lái)抵消內(nèi)距（padding）的影響

在bootstrap網(wǎng)格系統(tǒng)中帶有響應(yīng)式效果，其帶有四種類(lèi)型的瀏覽器，（超小屏，小屏，中屏和大屏），其斷點(diǎn)是768px,992px,1220px

容器（.container），針對(duì)不同的瀏覽器分辨率，其寬度也不一樣：自動(dòng),760px,970px,1170px;

.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;
  }

行容器（.row），將容器的行平分了12等份，也就是列。每個(gè)列都有個(gè)padding-left:15px和padding-right:15px；這樣也導(dǎo)致了第一列的padding-left和最后一列的paading-right占據(jù)了中寬度的30px

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

行容器(.row)定義了margin-left和margin-right值為-15px，用來(lái)抵消第一列的左內(nèi)距和最后一列的右內(nèi)距，這樣第一列和最后一列與容器（.container）之間就沒(méi)有間距了

.row {
  margin-right: -15px;
  margin-left: -15px;
}

基本用法

由于bootstrap框架在不同屏幕尺寸使用了不同的網(wǎng)格樣式，下面就以中屏（970px）為例。

1、列組合

列組合就是更改數(shù)字來(lái)合并列（列總數(shù)不能超過(guò)12），有點(diǎn)類(lèi)似于表格的colspan屬性；列組合方式只涉及兩個(gè)特性：浮動(dòng)于寬度百分比

<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 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-3">col-md-3</div>
               <div class="col-md-6">col-md-6</div>
               <div class="col-md-3">col-md-3</div>
           </div>
       </div>

效果如下：

bootstrap框架的網(wǎng)格系統(tǒ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%;
  }

列偏移

有時(shí)候，我們不希望相鄰的兩個(gè)列緊靠在一起，但又不想用margin或者其他技術(shù)手段，這是可以用列偏移（offset）來(lái)實(shí)現(xiàn)。使用列偏移只需在列元素上添加類(lèi)名.col-md-offset-*(星號(hào)代表要偏移的列組合數(shù))，具有這個(gè)類(lèi)名的列就會(huì)偏移，如：在列元素上添加.col-md-offset-4，表示該列向右偏移4個(gè)列的寬度

<div class="container">
           <div class="row">
               <div class="col-md-4">1111</div>
               <div class="col-md-4 col-md-offset-2">111</div>
               <div class="col-md-2">333</div>
           </div>
           <div class="row">
               <div class="col-md-4 col-md-offset-4">列偏移</div>
               <div class="col-md-2">col-md-2</div>
               <div class="col-md-2">col-md-2</div>
           </div>
       </div>

效果如下：

bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么

實(shí)現(xiàn)原理：

利用十二分之一的margin-left，有多少個(gè)offset，就有多少個(gè)margin-left

.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;
  }

需要注意的是，使用col-md-offset-* 對(duì)列進(jìn)行右偏移時(shí)，要保證列與偏移列的總數(shù)不超過(guò)12，不然會(huì)導(dǎo)致列斷行顯示

列排序

列排序就是改變列的方向，并且設(shè)置浮動(dòng)的距離。在bootstrap網(wǎng)格系統(tǒng)中是通過(guò)添加類(lèi)名。col-md-push-*和col-md-pull-*

<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>

效果如下：

bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么

col-md-4居左，col-md-8居右，如果要互換位置，就需要將col-md-4向右移動(dòng)8個(gè)列的距離，也就是添加類(lèi)名.col-md-push-8;同時(shí)需要將col-md-8向左移動(dòng)4個(gè)列的距離，也就是添加類(lèi)名.col-md-pull-4

bootstrap僅通過(guò)設(shè)置left和right來(lái)實(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 class="row">
           <div class="col-md-4">col-md-4</div>
           <div class="col-md-8">
               我在里面嵌套了一個(gè)網(wǎng)格
               <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>
       </div>
   </div>

bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章題目：bootstrap框架的網(wǎng)格系統(tǒng)工作原理是什么-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://bm7419.com/article20/hedjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、App開(kāi)發(fā)、做網(wǎng)站、標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站