腳手架

Bootstrap 建立在響應式 12 列網格之上。我們還包括基於該系統的固定寬度和流體寬度佈局。

默認 940px 網格

作為 Bootstrap 的一部分提供的默認網格系統是940 像素寬、12 列的網格。

它還針對各種設備和分辨率提供四種響應式變體：手機、平板電腦縱向、桌面橫向和小型桌面，以及大型寬屏桌面。

<div類= “行” > 
  <div類= "span4" > ... </div> 
  <div類= "span8" > ... </div> 
</div>

如此處所示，可以使用兩個“列”創建基本佈局，每個“列”跨越我們定義為網格系統一部分的 12 個基本列中的一些。

偏移列

4 偏移 4

3 偏移 3

8 偏移 4

<div類= “行” > 
  <div類= "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

嵌套列

使用 Bootstrap 中的靜態（非流體）網格系統，嵌套很容易。要嵌套您的內容，只需在現有列中添加一.row組新列。.span*.span*

例子

列的第 1 層

2級

<div類= “行” > 
  <div類= "span12" > 
    列的第 1 層
    <div類= “行” > 
      <div class = "span6" >級別 2 </div> 
      <div class = "span6" >級別 2 </div> 
    </div>
  </div>
</div>

網格定制

多變的	默認值	描述
`@gridColumns`	12	列數
`@gridColumnWidth`	60像素	每列的寬度
`@gridGutterWidth`	20像素	列之間的負空間
`@siteWidth`	所有列和排水溝的計算總和	計算列數和間距以設置`.container-fixed()`mixin的寬度

LESS 中的變量

Bootstrap 內置了一些用於自定義默認 940 像素網格系統的變量，如上所示。網格的所有變量都存儲在 variables.less 中。

如何定制

修改網格意味著改變三個@grid*變量並重新編譯Bootstrap。更改 variables.less 中的網格變量並使用記錄的四種方法之一重新編譯。如果要添加更多列，請務必在 grid.less 中添加 CSS。

保持響應

網格的自定義僅適用於默認級別，即 940 像素網格。要維護 Bootstrap 的響應方面，您還必須在 responsive.less 中自定義網格。

固定佈局

默認且簡單的 940 像素寬、居中佈局，適用於單個<div class="container">.

<正文>
  <div類= “容器” > 
    ...
  </div>
</正文>

流體佈局

<div class="container-fluid">提供靈活的頁面結構、最小和最大寬度以及左側邊欄。它非常適合應用程序和文檔。

<div class = "容器流體" > 
  <div類= “行流體” > 
    <div類= “span2” > 
      <!--側邊欄內容-->
    </div>
    <div類= "span10" > 
      <!--正文內容-->
    </div>
  </div>
</div>

支持的設備

Bootstrap 支持一些媒體查詢，以幫助您的項目更適合不同的設備和屏幕分辨率。以下是包含的內容：

標籤	版面寬度	列寬	天溝寬度
智能手機	480px及以下	流體列，無固定寬度
肖像平板電腦	480 像素到 768 像素	流體列，無固定寬度
景觀平板電腦	768 像素到 940 像素	44像素	20像素
默認	940 像素及以上	60像素	20像素
大顯示屏	1210 像素及以上	70像素	30像素

他們做什麼

媒體查詢允許基於許多條件（比率、寬度、顯示類型等）自定義 CSS，但通常集中在min-width和max-width.

修改我們網格中列的寬度
在必要時堆疊元素而不是浮動
調整標題和文本的大小以更適合設備

使用媒體查詢

Bootstrap 不會自動包含這些媒體查詢，但理解和添加它們非常容易，並且需要最少的設置。您有幾個選項可以包含 Bootstrap 的響應式功能：

使用編譯好的響應式版本，bootstrap-responsive.css
添加 @import "responsive.less" 並重新編譯 Bootstrap
將 responsive.less 修改並重新編譯為單獨的

為什麼不直接包括它？說實話，並非所有事情都需要響應。我們認為最好啟用它，而不是鼓勵開發人員刪除此功能。

  //橫向手機和向下
  @media （最大寬度：480px ）{ ... } _     
 
  // 橫向手機到縱向平板電腦
  @media （最大寬度：768px ）{ ... } _     
 
  // 縱向平板到橫向和桌面
  @media （最小寬度：768px ）和（最大寬度：940px ）{ ... } _ _        
 
  // 大桌面
  @media （最小寬度：1200px ）{ .. } _

腳手架

網格系統12 列，具有響應式扭曲