關於BOOTSTRAP的整理和理解

隨着CSS3和HTML5的流行，咱們的WEB頁面不只須要更人性化的設計理念，並且須要更酷的頁面特效和用戶體驗。做爲開發者，咱們須要瞭解一些寶貴的CSS UI開源框架資源，它們能夠幫助咱們更快更好地實現一些現代化的界面，包括一些移動設備的網頁界面風格設計。接下來就是要詳解Bootstrap框架：
首先，咱們要知道爲何使用框架的原理。CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版，網絡佈局，表單樣式，通用規則等代碼塊。使用CSS框架，能夠簡化工做，提升工做效率。

而後，咱們爲何要使用Bootstrap框架，而不使用其餘CSS框架？
緣由大概以下：

隨着H5，CSS3的快速火起來，用戶體驗尤其重要，移動設備用戶的龐大，不容小視，而偏偏，Bootstrap就是爲移動設備而開發的框架。他雖然是以移動設備優先，傾向於Mobile，但不是移動設備框架。
它由規範的CSS，JavaScript插件構成，其最大的優點是響應式佈局，CSS媒體查詢(Media Query)的功勞，使得開發者能夠方便的讓網頁不管在臺式機，手機上都得到最佳的體驗。
一、抽象出經常使用的css樣式,高再可用性,高移植性
二、有固有的定義,詳細的文檔及開發特色
三、高兼容性,能夠兼容流行的瀏覽器
四、以css爲主,但不必定所有是css,可能有一些js(或者其餘)腳本用於兼容瀏覽器

Bootstrap框架能夠分爲三類：

第一：預處理腳本：

• Bootstrap的源碼是基於最流行的CSS預處理腳本-Less和Sass開發的。你能夠採用預編譯的CSS文件快速開發，也能夠從源碼定製本身須要的樣式。例如。若是你頁面上有不少一樣的效果。只須要寫一個效果類。而後讓用到的地方去繼承他。就不須要再寫了。

第二：一個框架，多種設備

• 你的網站和應用能在Bootstrap的幫助下經過同一個代碼快速，有效設配手機，平板、PC設備，這都是CSS媒體查詢的功勞。

第三：特效齊全

• Bootstrap提供了全面、美觀的文檔、能夠找到關於HTML元素，HTML和CSS組件、jQuery插件方面的全部詳細文檔。

Bootstrap組件：

Bootstrap中包含了豐富的Web組件，根據這些組件，能夠快速的搭建一個漂亮、功能完備的網站。好比：下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等。
JavaScript插件Bootstrap自帶了13個jQuery插件，這些插件爲Bootstrap中的組件賦予了「生命」。其中包括：模式對話框、標籤頁、滾動條、彈出框等。 還有更重要的一點是，Bootstrap是徹底開源的。它的代碼託管，開發，維護都依賴GITHub平臺。
其次：
咱們看下使用Bootstrap的利弊：

優勢：

• 提升開發效率。
• 規範名稱定義，便於維護。
• 規範項目開發流程 d)css代碼更清晰、簡單。html代碼更合理。
• 大規模項目中能夠減小用戶下載

缺點：

• 學習成本提升。你須要瞭解整個框架，須要閱讀框架的文檔。
• css框架對於一個小項目等頁面來講很臃腫。框架中可能有大部分你用不到的代碼。
• 可能會沒法幫助你的技術提升。太依賴框架，以致於很難排除bug。包括框架中自己就帶的bug。
• 選擇本身須要的框架與開發框架都很痛苦。寫到後面發現愈來愈不靈活，愈來愈臃腫。

一、頁面外部引用樣式過多。譬如關於ul的margin定義,在格式化的css中會聲明爲0，而在基本樣式的css中又可能會聲明margin:5px 10px;因此在Yslow中會出現屢次定義。

二、組件複用性的考量。譬如表單定義的css中定義了全部表單的修飾,而假定在註冊這個頁面中只是須要這個css的百分之三十。那是否應切割出去那不要的百分之七十?綜合以上的二個問題，我的認爲解決的方式即是封裝，讓該有的有，不應有的沒有。儘可能減小http鏈接數和css的大小。但若是完全是這樣作的話，css的複用性又會變得不好，後期手工的封裝會很痛苦。

三、到底該不應支持em?可見如要支持em，最大的目的是爲了在瀏覽器中能夠根據用戶的分辨率大小自由縮放，對於擁有超大顯示器的用戶與小顯示器的用戶是很是有用的。但是在採集咱們用戶的瀏覽器數據後，發現分辨處於這二端的用戶很是少，可想而知，爲這部分的用戶多花比正常開發一倍以上的時間顯然是件不划算的事情，固然這是個建議，咱們也但願能使用em帶給用戶最好的感覺。

基於Bootstrap版本的使用：
目前使用較廣的是版本2和3，其中2的最新版本是2.3.2,3的最新版本3.3.5。
版本4最主要變化是：

• 1.從Less遷移到Sass（爲何？由於那麼Sass和LESS是同樣的，只是CSS預處理器中的一種而以。可是Less相對來講，語法太過嚴格，因此使用的人也就少了。）
• 2.改進網格系統
• 3.缺省彈性框
• 4.支持 Dropped wells,thumbnails,and panels for cards
• 5.合併全部HTML resets到一個新的模塊中：Reboot 全新自定義選項
• 6.再也不支持IE8
• 7.重寫全部的JavaScript插件
• 8.改進工具提示和popovers的自動定位
• 9.改進文檔
• 10.其餘大量改進

總結：若是有前端技術的博友們，應該都不是問題。初學者是有點難度的。

原文地址：https://segmentfault.com/a/1190000015766524