最新的Web開發教程
 

Bootstrap Grids


Bootstrap網格系統

Bootstrap's網格系統最多允許跨頁12列。

如果您不想單獨使用全部12列,您可以將列,共同打造更寬的列:

跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1 跨度1
跨度4 跨度4 跨度4
跨度4 跨度8
跨度6 跨度6
跨度12

Bootstrap's網格系統響應,並且列將根據屏幕大小自動重新安排。


網格類

Bootstrap網格系統有四種類型:

  • xs (用於手機)
  • sm (平板電腦)
  • md (台式機)
  • lg (較大的桌面)

這些類以上可以結合起來,創造出更多的活力和靈活的佈局。


一個基本結構Bootstrap電網

以下是一個基本的結構, Bootstrap格:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

第一; 創建一個行( <div class="row"> )。 然後,添加的列中的期望數目(代碼具有適當.col-*-*的類)。 注意,在數字.col-*-*應該總是加起來12的每一行。

下面我們收集了基本的一些例子Bootstrap網格佈局。


三等分列

.COL-SM-4
.COL-SM-4
.COL-SM-4

下面的例子說明如何獲取起始於平板電腦和擴展到大型台式機三個等寬列。 在手機上,列會自動疊加:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
試一試»

兩個不相等的列

.COL-SM-4
.COL-SM-8

下面的示例演示了如何得到兩個不同的寬度列起始於平板電腦和擴展到大型台式機:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
試一試»

提示:您將了解更多關於Bootstrap電網在本教程的後面。