怎麼學習Bootstrap：[1]bootstrap環境搭建?

何為Bootstrap? bootstrap有什麼作用, 能給我帶來什麼? 你想開發現在最火的響應式網站, 你想寫一個頁面在不同的裝置上檢視, 並且相容良好嗎? 來吧. 看bootstrap的教程吧! 下面就讓你領略一些bootstrap的風姿!

工具/原料

下載bootstrap的最新外掛. 現在最新的為bootstrap3.

方法/步驟

何為Bootstrap? 簡潔的、直觀的、超牛的、以移動裝置優先的前端開發框架，讓web開發更迅速、簡單。他是Twitter推出的html/css的前端框架, 現在的網頁設計越來越多的平面化, 所以, 也就出現了一些平臺來做平面化的樣式來供我們來使用. 因為這款框架是一個開源的框架, 所以現在很多人都在使用該框架. 下載下來的框架目錄結構如圖:

怎麼去使用一個開源的框架或者一段現成的原始碼? 首先你確定要保證你所需要的引用你都有, 還有你要保證執行的最小點. 就是需要3個外部檔案, A, B, C, 你就要找到這3個檔案, 如果是你找到的一段程式碼, 你要確保他能夠執行, 如果都沒有辦法執行, 放棄吧. 另找下一個. 一般情況下, 一個框架都會給你一個最基本的例子, 這個例子中使用了框架需要的外部檔案和一些簡單的說明, bootstrap也給出了一個簡單的例子. 如圖就是最基本的一個例子. 該例子說了一個很重要的, 也是很好的一個檔案引用的方式, 就是css. 全部放在上面, 然後把js. 都放在頁面的最下面, 這樣能夠更好的載入頁面渲染. 建議你使用最基本的頁面去修改你需要的頁面, 而且要做到按照自己的需求來寫程式碼. 不要複製, 貼上.

Bootstrap中內建了一套響應式的, 移動優先的流式柵格系統, 隨著不同的裝置, 不同的平臺. 或者視窗大小(viewport), 根據他們的不同系統會自動的分成12份. 也就是說, 柵格系統是通過一系列的行和列來組成我們需要的頁面, 然後把你需要的內容放在這些的佈局中.在使用柵格系統的時候, 需要注意的是: 需要在使用.row(行的意思)的外層使用 .container 為的是, 在賦值時給出合適的排列(aligment)和內補(padding).

舉個例子: 一行 其中包含3個內容 分別佔螢幕的25%, 50%, 25%. 我們要在超小螢幕裝置-手機上使用. 那麼就要寫成12的3, 6, 3. 具體程式碼看圖片, 這裡的效果圖, 為了效果加上了一個well的class. 只是為了演示效果, 能夠看清除.

為了有一個很好的學習東西, 讓你看一下表格的建立. 就是這麼的簡單, 只需要在table上, 填寫一個class為.table的樣式即可生成一個很好很實用的表格. 其實, 這些都是別人提前建立好的頁面顯示效果, 就是不用自己再去寫一些簡單的css效果. 多練. 多使用它就屬於你.

在給出一個只有簡單的帶有導航欄的頁面. 該頁面, 理解透了, 這個東西你就算學會了, 剩下的就是用什麼查一下文件就拿來用了,

該教程告一段落, 還有更多的一大波在後面陸續而來. 有錯誤, 請不要吝嗇你的批評. 有批評才會有更多的進步.

注意事項

框架學習起來很簡單, 要想用成自己的東西, 就需要有一些基礎, 這些基礎包括css, js. 還有jquery. 有這些基礎該框架對你來說, 沒有任何難度.

只要去做就有可能成功! 我一直在堅持. 你呢? Good luck!