淺談Bootstrap自適應功能在Web開發中的應用

隨着移動端市場的強勢崛起，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-10"></div>
</div>

這段的意思是當瀏覽器的寬度在768——992之間時，採起4：4:4的模式呈現，當瀏覽器寬度大於992時，就按1：1:10的模式呈現。固然你也能夠四種都是用，細分的在仔細點，無論怎麼樣，Boostrap會根據瀏覽器的寬度自動分配列寬度，從而匹配你所想要的呈現模式。至於它怎麼作到的，你不用關心，你只須要考慮你在手機上的網頁呈現樣式，或者PC上的呈現樣式的設計就好了，接下來，就交給Boostrap吧。

總結：Boostrap的使用可以極大的增長網站開發的效率，自適應的功能，又極大的減輕了後期代碼的維護，想象一下，PC端的網站維護，移動端還有另外一個版本的維護，實際項目就參考我前段時間開發的網站吧（百度：神巴巴星座網），就不打連接了，省的被K，我是側重移動端的網頁，因此PC端顯示不咋地，就到這了，但願你們互相學習。