? ? ? ? 標題屬于偷懶的結果讳推，實際上本文內(nèi)容定位并不算是對于bootstrap的入門凝赛。畢竟大家都很聰明做个，bootstrap上手也是沒啥門檻的淤井。所以本文其實是基于個人的對bootstrap的一些認識以及過往開發(fā)經(jīng)驗中的積累，來說說bootstrap的特點崇呵、某些用法以及需要注意的地方缤剧。另馅袁，本文是在默認讀者對于bootstrap已有初步了解域慷，或者至少粗略看完過bootstrap官方文檔的情況下來編寫的，請知悉。
一犹褒，開發(fā)中的相關規(guī)范及技巧
1抵窒，頭部meta標簽以及兼容性相關
2，柵格系統(tǒng)的使用
? ? ? ? bootstrap中柵格系統(tǒng)通過給元素添加col-*類來實現(xiàn)叠骑，col類共有四種類型：
? ? ? .? col-xs-*? ? .? col-sm-*? ? ? .? col-md-*? ? .? col-lg-*
? ? ? 它們是通過設置的尺寸分割臨界點來產(chǎn)生作用的李皇，也就是說，如果你只給當前元素添加了其中的某一種class名宙枷，它可能只會在這種尺寸區(qū)間產(chǎn)生預期的效果掉房，而不能保證其他size的顯示設備時的排版效果。下圖示例說明：
圖1慰丛，示例代碼塊（部分css代碼沒在圖片內(nèi)）卓囚；
圖2，屏幕寬度 < 992px時（即col-sm-*/col-xs-*）;
圖3诅病，屏幕寬度 > 992px時（即col-md-*/col-lg-*）;
3贤笆，多顯示設備下的柵格使用
? ? ? ?多種尺寸的柵格排版也可能會有個性化的排版要求蝇棉，因此我們可以對同一個div設置多個不同類型的柵格class來實現(xiàn)不同的排版效果；還有就是針對不同尺寸屏幕的顯示內(nèi)容的變化芥永，也可以通過添加visible-*/hiddden-*的class來實現(xiàn)篡殷。
4飞袋，柵格內(nèi)容區(qū)
a戳气，模塊化內(nèi)容區(qū)。
? ? ? ? 用模塊化的方式去構建項目時巧鸭，模塊最外層不應該有規(guī)定柵格的class瓶您，而是應該在使用該模塊的頁面中去做柵格排版，這樣就保證了模塊的多處不一樣排版情況下復用的可能纲仍。當然模塊內(nèi)部可以有自己的柵格劃分呀袱，模塊內(nèi)有柵格的話，最外層div應該有row這個class郑叠，如圖：
b夜赵，容器內(nèi)的單位設置。
? ? ? ? 因為bootstrap作為響應式的框架乡革，其柵格的寬度是一個變化值寇僧。所以我們在排版上盡量做到用柵格去切割排列摊腋，而少用我們常見的inline-block，float嘁傀，margin等去做兴蒸；但是針對一些特定設計，我們用柵格無法達到排版效果時细办，我們也應該盡量少去給容器設置固定的width橙凳；多用百分比，或者sass中的計算函數(shù)來實現(xiàn)笑撞，當然能直接在bootstrap中找到組件就更好了（如media組件）岛啸。
5，阻止最小縮放尺寸
? ? ? ? ?如果不禁止響應式茴肥，只是限制在電腦和平板使用值戳，可以通過給container加min-width來限制，然后其他步驟同上相應改變即可炉爆。
6堕虹，行列的使用規(guī)范
? ? ? ? ?為了內(nèi)容在顯示上的規(guī)范及一致性，我們在布局柵格系統(tǒng)時應該嚴格按照規(guī)范去書寫和嵌套芬首。
a赴捞，單層嵌套必須包裹在container和row內(nèi)；
b郁稍，多層嵌套則必須在內(nèi)部柵格外包裹一層row赦政；
c，盡量不要去更改某一處的row或col-*的左右margin或者padding耀怜，容易引起排版錯亂或內(nèi)容區(qū)不齊整恢着；
d，某些列的偏移财破，或者較大間距（大于默認間距）的掰派，善用col-offset-*/col-pull-*/col-push-*的class來實現(xiàn)；
二左痢，項目前期規(guī)范相關
1靡羡，源碼相關；
下載bootstrap整個工程文件俊性，用未壓縮的代碼先進行個性化定制略步，然后再壓縮引用；
還有bootstrap中的mixin文件等代碼可以復用定页，方便我們開發(fā)趟薄；
bootstrap的scss文件結構，代碼劃分方式典徊，包括具體代碼中變量/塊代碼/色值函數(shù)等代碼的書寫都是非常好的模板杭煎，值得我們?nèi)パ芯繉W習恩够。
一旦我們定制化的文件確定后，之后所有改源碼的行為應該讓大家都知悉岔帽；
業(yè)務代碼中覆蓋源碼的行為應該做限定生效區(qū)域玫鸟，避免污染全局导绷；
2犀勒，項目css代碼文件結構
? ? ? ? 按照我們既定的方案，手機端和平板/電腦端分兩套代碼去開發(fā)妥曲，為的是更個性化的開發(fā)需求實現(xiàn)以及代碼質(zhì)量保障贾费。但是兩套代碼處于同一開發(fā)目錄下，所以我們有必要在兩套代碼的css文件結構上多加考量檐盟。目前我個人考慮的結構大致如下：
|---scss
|---|---public? ? ? ? ? ? ? ? ? ? ? ? ? ? ------>公共樣式的目錄
? ? ? ? ? ? |---mixin.scss? ? ? ? ? ? ?
? ? ? ? ? ? |---color.scss
? ? ? ? ? ? |---size.scss
|---|---mobile ? ? ? ? ? ? ? ? ? ? ? ? ? ------>手機端的全局公共樣式
|---|---pc ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ------>平板和PC端全局公共樣式
? ? ? ? 如目錄所示褂萧，我們在scss目錄下分三個文件夾，分別是整個項目的公共樣式葵萎，手機端的公共樣式导犹，pc的公共樣式。至于其他的具體的scss文件羡忘，我們按模塊放在具體模塊下就好谎痢。
? ? ? ? ?暫時就寫這么多，以后想到會再補充卷雕。
