title: bootstrap實踐筆記 date: 2016-04-25 23:59:02

tags:

長期更新,前輩總結的bootstrap經驗

如何部署container與container-fluid

為了方便更改,在body標籤下部署container-fluid,因為container不能巢狀container原則,如果想內容居中則可以使用.limiter這個class.具體參考如下 ```

.limiter{ max-width:1170px; margin:0 auto; }

```

row與col之間的佈局

原則上一個section應該只有一個row.一個row下面可以有多個(總數超過12列)的col,那麼要實現col與col之間padding為0 應該用一個額外的class如.no-gutters來實現 ```

.row.no-gutters { margin-right: 0; margin-left: 0; } .row.no-gutters [class^="col-"], .row.no-gutters [class*=" col-"] { padding-right: 0; padding-left: 0; }

```

設定h1-h6之間margin為0

為了美觀與方便設計.應該設定h1-h6之間margin為0,需要的時候再額外設定

col與col之間的border

因為col與col width都是設定好的 如果多出1px的border那麼會導致其他的col列下移 解決方案如下 ```

.box{ max-width: 96%; }

``` 應該用一個額外的div來包裹整個內容 同時給這個div設定最大寬度

如有需要應該在col/row中加上一個class

請小心在row上加class,row上的class僅僅用來處理顏色等內容而不應該設定position col上的class也僅起定位作用

給圖片包裹一層

如需要設定圖片則給圖片加上響應式class(.img-responsive) 或者給圖片包裹一層div 並且設定 overflow:hidden

col的class

不直接給col加class是因為col本身就帶了padding和margin 怕改錯 如果要內部要增加的話

設計稿寬度

設計稿規定常見的高寬度比如768px,尤其是單頁全屏網頁