《半吊子全棧系列：Boostrap3》

前言：後端開發作網站

　　幾年前，做爲一名純粹後端Java開發人員，對JS還沒開竅，對於頁面只停留在《十天學會DIV+CSS》這種程度，可是我又想作網站怎麼辦？

　　這時候Boostrap3出現了，併成爲我進軍前端的踏板，到如今滿打滿算也作了大大小小10來個網站，在專業的UI設計人員看來可能上不了檯面，但從我這個程序猿來看，perfect~

　　先放出一個本身原創的幾個demo，俗話說，只有實踐過的人才有發言權。

 

 

 

     

　　本人作的不算好，由於我原本是作Java的後臺開發者，大神繞道，諒解，適合初中級BootStrap3研究者（以上界面都支持手機、平板、PC端，感興趣的能夠和我交流）。

Bootstrap 簡介

　　Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發佈的開源產品。目前穩定版本是Bootstrap v3.3.7，最新版是Bootstrap 4.x，不過仍是測試版。

　　Bootstrap 3 的CSS技術是基於LESS的動態CSS。固然他完美的將CSS3和HTML5，流體式響應佈局整合起來，讓三者不只僅停留在刀耕火種的概念階段，讓三大潮流前端技術在快速應用上成爲了可能。以上頁面是用BootStrap3作出來的， Bootstrap 2 和Bootstrap 3 能夠說是不一樣的產品，Bootstrap 2有一些可視化拖拽工具，但 Bootstrap 3就必須本身手動寫，Bootstrap 3 是響應式佈局、移動設備優先的 WEB 項目，學習難度大，但3是趨勢，成熟產品，推薦學習。Bootstrap 3 有幾大特點：移動設備優先、響應式佈局、柵格系統。

 

【響應式佈局】

　　簡而言之，就是一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本。響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用大勢所趨來形容也不爲過。

　　優勢不言而喻，缺點也是有的：

　　一、兼容各類設備工做量大，效率低下；

　　二、代碼累贅，會出現隱藏無用的元素，加載時間加長；

　　三、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果；

　　四、必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況。

　　有需求就會有解決方案，說到響應式佈局，就不得不提起CSS3中的Media Query（媒介查詢），Bootstrap 正是利用了這種方式配合流式柵格系統選擇了折衷方案。

 

【柵格系統】

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

　　使用規則：

　　一、一行最多12列，超過則另起一行，列.col-sm-*有適合多種屏幕的，一般用md是中屏，要考慮兼容多個的話，能夠寫多種；

　　二、全部.row必須放在容器裏面，全部.col列必須放在.row行裏面（嵌套也是如此）；

　　三、列偏移使用.col-md-offset-*，列排序.col-md-push-*；

　　4 、....（規則不少）

　　一句話總結，柵欄系統能夠各類嵌套。無任何限制。惟一的規則是這一行的列寬度要相加等於12，大體效果以下：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
    </div>
    <div class="col-xs-6 col-md-4">
   </div>
    <div class="col-xs-6 col-md-4">
    </div>
  </div>
</div>

　　最後說一句，想用BS3的 必定要拋棄原有的DIV設計理念了，必定時時刻刻都試着運用12柵欄系統，不要再用傳統DIV佈局了！！那樣你的頁面雖然看起來很 BootStrap3 可是 它徹底沒有流體特性。 放棄傳統DIV佈局，把大腦裏裝上12格柵欄系統。

　　關於boostrap 的介紹就到這邊，有興趣學習相關基礎的同窗，能夠直接到中文網學習。 

Bootstrap 學習路線

【初級入門】

一、基礎學習：前往中文網或者菜鳥教程，學習Boostrap的基礎CSS和JS組件，可以本身寫出demo佈局。

二、學會抄襲：BS3的開發是須要抄襲的，並且必須抄襲！！ 官方甚至鼓勵抄襲！！ 首先你要會使用官方已經公佈而且整合好的各類控件，各類特效，會用以後，你還要知道怎麼把這些控件和特效整合起來，創造一個新的特效。知道每一個參數具體是控制什麼的，用大腦記下來（BS3的痛苦就在這兒 你須要去記憶一些東西）。實在記不下來 開發的時候就開着文檔，寫着代碼，不懂的隨時點擊隨時看。。

若是你熟練抄襲官方文檔 而且會本身組合控件的時候 能夠說你已經入門了！！！

 

【高手進階】

三、樣式組合：這一階段差很少已經會寫一個BootStrap3 官方默認主題，色彩渣到極致的頁面了，http://bootswatch.com/ 這個網站裏面有好幾套免費主題， 下載他們的CSS樣式，直接替換官方的便可，你會以爲頁面面目一新！固然，若是你的CSS功底夠紮實，不妨本身組合本身設計樣式。

四、擴展插件：Bootstrap 自帶 12 種 jQuery 插件，中文網上面有，這些都是最基礎的，但這些遠遠不夠。「想要更多的組件（個人財寶）嗎？想要的話就給你吧，去找吧，互聯網（偉大航路），我把世界的一切都放在那裏，ONEPIECE！」

五、設計理念：到了這一階段就要多和UI設計師討論討論，什麼極簡原則、扁平化設計拉，多逛一些花瓣網之類的設計網站，提高藝術家境界。。嘖嘖，其實「聞道有前後，術業有專攻」，設計理念沒必要強求，多逛一些Bootstrap優站精選便可。

編後語

　　要學好boostrap 光記住大量的Class和零散的組件寫法是沒用的，只有不斷動手去嘗試，去組合，不論美醜，才能讓它們展示出完整的藍圖，這也是就是前端建站的樂趣所在。

　　「紙上得來終覺淺，絕知此事要躬行」