Bootstrap格線系統

Bootstrap的格線系統，把寬度切成了12份，你可以透過列(row)裝行(col)，來指定在每一個寬度的螢幕上，這個區塊應該佔多少大小。

中文說明手冊

LG(大螢幕>1200px)

MD(中螢幕>992px)

SM(小螢幕>768px)

XS(超小螢幕 <768px)

1
2
3
4
5
6
7
8
9
10
11
12

大區塊(.col-sm-4.col-md-7.col-lg-6)

在bootstrap中總共有分四個螢幕尺寸，要指定欄位寬度的時候，使用(xs/sm/md/lg)四個尺寸關鍵字

尺寸是向上覆蓋的(比如如果指定md螢幕佔7欄，沒有指定lg大螢幕佔多少，會沿用中螢幕的分配)

大區塊(.col-sm-8.col-md-5.col-lg-6)

  • 清單 GG
  • 清單
  • 清單
haha


標題文字(.col-sm-4 .col-sm-12)

可以使用hidden-尺寸 或是 /visible-尺寸 來指定在特定網頁大小時區塊要不要顯示

標題文字(.col-sm-4 .visible-md)

我只有在螢幕是中螢幕(md)的時候會出現

詳細資訊

標題文字(.col-sm-4 .visible-md)

我只有在螢幕是中螢幕(md)的時候會出現

偏移的區塊(.col-sm-8.col-sm-offset-4)

使用col-尺寸-offset-欄位數來指定左側偏移的大小