隨着移動端市場的強勢崛起，web的開發也變得愈發復雜，對於個體開發者來說，自己開發的網站，在電腦、手機、Pad等上面都要有正常的顯示以及良好的用戶體驗。如果每次都要自己去調整網頁去匹配各個不同的客戶端設備，這個工作量可想而知。如果網站可以自適應瀏覽器大小，對於開發者來說，無疑是天大的福音。今天，我通過自己的實踐，簡單的探探boostrap的自適應功能，這也是眾多平台中，我認為比較好的一個。
Boostrap是什么
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，並兼容大部分jQuery插件。通俗一點講，他就是一個集合樣式與js的開源包，我們加載Boostrap包，通過class調用里面提供的類名，產生自己想要的樣式或者效果。如果大家想要系統的學一學Boostrap的話，可以百度一下，說實話，用熟了之后，開發速度真的事半功倍，咻咻咻的。
Boostrap的“柵欄”模式
Boostrap自適應功能的基礎就是“柵欄"模式，它是將瀏覽器以行列形式去划分：一共12列，行數自定義，根據你所要顯示的元素，確定每個元素顯示的大小即需要的列數，如果超過范圍，就會自動轉行。每列的大小是Boostrap根據當前瀏覽器的大小自動平均分配。舉個例子，看下圖：
第一張圖是瀏覽器顯示效果，第二張圖是設計圖，這個意思就是在一行中顯示三個標簽元素，上面提到，不管瀏覽器大小如何，都將其分成12列，所以一共3個column，那每個column占4列，當瀏覽器大小發生變化時，每列的寬度發生變化，但元素所占的列數是不變的，說的比較啰嗦籠統，想研究的朋友可以去官網學習下，我自己前段時間開發的一個網站：
神巴巴星座網，前端的架構全部采用了Boostrap柵欄模式，大家也可以通過開發工具看看前端源碼。
Boostrap的自適應功能
其實理解柵欄模式之后，自適應功能就簡單很多了，根據瀏覽器的大小，Boostrap有四種柵欄類名提供使用，用法與Css樣式表類名選擇器樣式調用是一樣的：
xs：col-xs-1 ~ col-xs-12，多列始終在一行內。
sm：col-sm-1 ~ col-sm-12，多列在瀏覽器像素寬度大於等於768px時才在一行內。
md：col-md-1 ~ col-md-12，多列在瀏覽器像素寬度大於等於992px時才在一行內。
lg：col-lg-1 ~ col-lg-12，多列在瀏覽器像素寬度大於等於1200px時才在一行內。
我貼一段偽代碼：
<div class="row">
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-1"></div>
<div class="col-sm-4 col-md-10"></div>
</div>
</div>
這段的意思是當瀏覽器的寬度在768——992之間時，采取4：4:4的模式呈現，當瀏覽器寬度大於992時，就按1：1:10的模式呈現。當然你也可以四種都是用，細分的在仔細點，不管怎么樣，Boostrap會根據瀏覽器的寬度自動分配列寬度，從而匹配你所想要的呈現模式。至於它怎么做到的，你不用關心，你只需要考慮你在手機上的網頁呈現樣式，或者PC上的呈現樣式的設計就行了，接下來，就交給Boostrap吧。
總結：Boostrap的使用能夠極大的增加網站開發的效率，自適應的功能，又極大的減輕了后期代碼的維護，想象一下，PC端的網站維護，移動端還有另一個版本的維護，實際項目就參考我前段時間開發的網站吧（百度：神巴巴星座網），就不打鏈接了，省的被K，我是側重移動端的網頁，所以PC端顯示不咋地，就到這了，希望大家互相學習。