1. 程式人生 > >BootStrap格柵系統

BootStrap格柵系統

格子 str -o esp 開始 寬度 prim class 水平

格柵參數分為
超小屏幕 手機 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面顯示器 (≥992px) 大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為 總是水平排列 開始是堆疊在一起的,當大於這些閾值時將變為水平排列C
.container 最大寬度 None (自動) 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列(column)數 12
最大列(column)寬 自動 ~62px ~81px ~97px
槽(gutter)寬 30px (每列左右均有 15px)
可嵌套 是
偏移(Offsets) 是
列排序 是
實例代碼:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
這一行 是大屏幕的樣式 後面的6是占據的格子數量
格子的數量一行總數是12 那麽這個能放連個 然而可以在這個樣式中追加(並集選擇器)
例如(代碼):
<div class="row">
<div class="col-md-6 col-sm-12">.col-md-6</div>
<div class="col-md-6 col-sm-12">.col-md-6</div>
</div>
該段落代碼 後方的class 添加是為了自動適應較小屏幕 類似於column的排列方式

圖片的自適應樣式類為:img-responsive


按鈕的樣式
<button class="btn btn-primary">按鈕</button>
<button class="btn btn-success">按鈕</button>
<button class="btn btn-info">按鈕</button>
<button class="btn btn-warning">按鈕</button>
<button class="btn btn-danger">按鈕</button>

col-md-offset-8 位移列數

更多樣式盡在V3.bootstrap.com

BootStrap格柵系統