深入了解Bootstrap中的網格系統-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

深入了解Bootstrap中的網格系統

青灯夜游

Feb 18, 2021 pm 10:24 PM

bootstrap網格系統

深入了解Bootstrap中的網格系統

相關推薦：《bootstrap教程》

#bootstrap框架中的網格系統就是將容器平分成12份，在使用的時候可以根據實際情況重新編譯LESS/SASS原始碼來修改12這個數值。

bootstrap框架的網格系統工作原理：

1、資料行（.row）必須包含在容器（.container）中，以便其賦予合適的對齊方式和內距（padding）

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

2、在行（.row）中可以新增欄位（.column），但列數總和不能超過平分的總列數（如：12）

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

3、具體內容應放在列容器（.column）之內，而且只有列(.column)才可以作為行容器（.row）的直接子元素

#4、透過設定內距（padding）從而建立列與列之間的間距，然後透過為第一列和最後一疊設定負值的外距（margin）來抵消內距（padding）的影響

在bootstrap網格系統中帶有響應式效果，其具有四種類型的瀏覽器，（超小屏，小屏，中屏和大屏），其斷點是768px,992px,1220px

#容器（.container），針對不同的瀏覽器分辨率，其寬度也不一樣：自動,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等份，也就是列。每個欄位都有一個padding-left:15px和padding-right:15px；這也導致了第一列的padding-left和最後一列的paading-right佔據了中寬度的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，用來抵消第一列的左內距和最後一列的右內距，以便第一列和最後一列與容器（.container）之間就沒有間距了

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

基本用法

#由於bootstrap框架在不同螢幕尺寸上使用了不同的網格樣式，下面就以中屏（970px）為例。

1、列組合

列組合就是更改數字來合併列（總數不能超過12），有點類似表格的colspan屬性；列組合方式只涉及兩個特性：浮動於寬度百分比

<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中的網格系統

#確保所有列左浮動

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

定義每個列組合的寬度

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

列偏移

有時候，我們不希望相鄰的兩個列緊靠在一起，但又不想用margin或其他技術手段，這是可以用列偏移（offset）來實現。使用列偏移只需在列元素上新增類別名稱.col-md-offset-*(星號代表要偏移的列組合數)，具有這個類別名稱的列就會偏移，如：在列元素上新增.col-md-offset-4，表示該列向右偏移4個列的寬度

<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中的網格系統

實作原理：

利用十二分之一的margin-left，有多少個offset，就有多少個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-*對列進行右偏移時，要確保列與偏移列的總數不超過12，不然會導致列斷行顯示

列排序

##列排序就是改變列的方向，並且設定浮動的距離。在bootstrap網格系統中是透過新增類別名稱。 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中的網格系統 ##col-md-4居左，col-md -8居右，如果要互換位置，就需要將col-md-4向右移動8個欄位的距離，也就是新增類別名稱.col-md-push-8;同時需要將col-md-8向左移動4個欄位的距離，也就是新增類別名稱.col-md-pull-4

bootstrap僅透過設定left和right來實現定位效果。

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

列巢狀

列巢狀可以在一個列中新增一個或做個行（row）容器，然後在這個行容器中插入列，在列容器中的行容器（row），寬度為100%時，就是目前外部列的寬度

<div class="container">
       <div class="row">
           <div class="col-md-8">
               我在里面嵌套了一个网格
               <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">
               我在里面嵌套了一个网格
               <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中的網格系統更多程式相關知識，請造訪：

程式影片

！！

以上是深入了解Bootstrap中的網格系統的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

了解響應式網絡設計的引導網格系統May 14, 2025 am 12:07 AM

Bootstrap'SgridSemiteStemfiveDuetoIts12-columnlayOutAndResponsiveClasses，允許ForfforFlexibleanDmaintabainbabledesignsignsigns.toleverations.toleveration：1）userowsandcolumnswithclasseslikecol-md，col sm，col-lggfordforentscreenscreenscreens.2）

Bootstrap網格系統：響應迅速佈局的綜合指南May 13, 2025 pm 04:17 PM

BootstrapGridSemessentialForCreatingResponsivElayouts.1）ItuseScontainers，行，和ColumnSbasedona12-ColumnLaylayOut.2）cssflexboxandMediaqueriesensEnsureflexibilityAcrossscreenscreensacribilityAcrosscreensacrizes.3）classLikeCol-XSSLLIKECOL-XSSLIKECOL-XM，COLIKECOL-XM，COL-SM，COLCHANGCHANGCHANGCHENSCHENTCHESCHEN.4）

Bootstrap：所解釋的應用和優勢May 10, 2025 am 12:18 AM

Bootstrap是一個前端框架，用於快速構建響應式網站。其優勢包括：1.快速開發：利用預定義樣式和組件。 2.一致性：提供統一設計風格。 3.響應式設計：內置網格系統適應各種設備。通過CSS類和JavaScript插件，Bootstrap簡化了網頁開發過程。

Bootstrap：簡化響應式Web開發May 09, 2025 am 12:13 AM

Bootstrap簡化開發流程主要通過其柵格系統、預定義組件和JavaScript插件。 1.柵格系統允許靈活佈局，2.預定義組件如按鈕和導航欄簡化樣式設計，3.JavaScript插件增強交互功能，提升開發效率。

Bootstrap：響應式Web設計的關鍵May 08, 2025 am 12:24 AM

Bootstrap是由Twitter開發的開源前端框架，提供了豐富的CSS和JavaScript組件，簡化了響應式網站的構建。 1)其網格系統基於12列佈局，通過類名控制元素在不同屏幕尺寸下的顯示。 2)組件庫包括按鈕、導航欄等，易於定制和使用。 3)工作原理依賴於CSS和JavaScript文件，需注意處理依賴關係和样式衝突。 4)使用示例展示了基本和高級用法，強調了自定義功能的重要性。 5)常見錯誤包括網格系統計算錯誤和样式覆蓋，需使用開發者工具調試。 6)性能優化建議只引入必要組件，使用預處理器定製樣

Bootstrap：一個強大的Web設計框架May 07, 2025 am 12:05 AM

Bootstrap是一個開源的前端框架，由Twitter團隊開發，旨在簡化和加速網頁開發過程。 1.Bootstrap基於HTML、CSS和JavaScript，提供了豐富的組件和工具，用於創建現代化的用戶界面。 2.它的核心在於響應式設計，通過預定義的類和組件實現各種佈局和样式。 3.Bootstrap提供了預定義的UI組件，如導航欄、按鈕、表單等，易於使用和調整。 4.使用示例包括創建簡單的導航欄和高級的可折疊側邊欄。 5.常見錯誤包括版本衝突、CSS覆蓋和JavaScript錯誤，可通過版本管理工具

Bootstrap在React中的力量：詳細的外觀May 06, 2025 am 12:06 AM

Bootstrap在React中可以通過兩種方式集成：1)使用Bootstrap的CSS和JavaScript文件；2)使用React-Bootstrap庫。 React-Bootstrap提供了封裝好的React組件，使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap組件：逐步教程May 05, 2025 am 12:09 AM

在React項目中使用Bootstrap組件可以通過兩種方式：1)使用原始Bootstrap的CSS和JavaScript；2)使用專門為React設計的庫如react-bootstrap或reactstrap。 1)通過npm安裝Bootstrap並在入口文件中引入其CSS文件，然後在React組件中使用Bootstrap類名。 2)安裝react-bootstrap或reactstrap後，直接使用其提供的React組件。使用這些方法可以快速構建響應式UI，但需注意樣式加載、JavaScript

See all articles