Web前端學習筆記：Bootstrap框架

　　好久以前就有不少人給我推薦twitter的Bootstrap框架，可是直到前幾天我才真正學習了下Bootstrap，的確是至關棒的框架，至少從視覺體驗上超越了不少之前碰到了前端UI框架。今天我要聊聊Bootstrap，最後給出一份我整理的Bootstrap的UI的demo，以及我本身使用Bootstrap開發的例子。

　　下面我在這裏簡單的介紹下Bootstrap框架。

　　Bootstrap框架屬於UI框架，這個和jQuery不太同樣，其實準確的描述Bootstrap框架屬於css框架而非javascript框架，可是它自己也使用javascript來完善Bootstrap框架的視覺效果。此外，Bootstrap框架十分超前，在支持html5和css3的瀏覽器上表現特別好，並且對移動終端的瀏覽器支持也是至關優秀。

　　一個完整的Bootstrap框架包含以下四個部分：

1. 腳手架（不知道官網爲啥這麼翻譯）：用於重置背景、連接樣式、柵格系統等，幷包含兩個簡單的佈局結構。Bootstrap的樣式使用了lesscss技術，好比重置背景這樣的操做，這些比較簡單我就不展開敘述了，腳手架裏最出彩的是柵格系統和佈局。柵格系統是將頁面寬度分紅12列，柵格系統分爲兩種類型，一種是默認柵格系統，這時候柵格系統是按940px像素進行等分，咱們可使用span1，span4這樣的class屬性操做默認柵格佈局，另外一種是流式柵格系統，這個時候分列的寬度就不是固定，而是根據你可視頁面進行12等分，一樣可使用span1，span4操做流式柵格。這個系統很是之好，作css最難的就是div佈局，使用柵格系統能夠大大簡化div的佈局操做。另一個就是作佈局操做了，佈局也分爲固定和流式，讓不太精通css佈局也能輕鬆操做佈局。
2. 基本的css樣式。Bootstrap給出了同樣經常使用的HTML元素的樣式，例如：按鈕、表單和文字等等。大部分作網站的人都不是美工出身，作出賞心悅目的網頁是件很困難的事情，css提供的樣式很專業很精美，能讓咱們輕鬆開發出一套精美的網站
3. Css組件：Bootstrap還提供一些經常使用的css組件，一樣很優秀很棒。
4. Javascript插件：Bootstrap是個開放的系統，咱們能夠隨意擴展Bootstrap，特別是javascript的框架，這樣Bootstrap就會更加專業。

　　Bootstrap是個操做性質的框架，不必作深刻分析，最關鍵是有沒有好的使用實例，我下載Bootstrap發現，下載包裏的example不是太強大，例子都在它的官網上，不少對css和javascript不是特別熟悉的人使用起來都不太習慣，所以我將這些例子進行了整合，做爲單獨的例子工程，這個工程很是全面，我在網上找過，目前尚未比我整理的更詳盡的例子，大夥下載下來按照個人工程目錄結構就能夠進行開發了。此外，我作了一個簡單的demo，也分享給你們，demo的截圖是：

下載連接：

我整理的實例：

http://files.cnblogs.com/sharpxiajun/bootstrap-1.0.zip

我作的demo：

http://files.cnblogs.com/sharpxiajun/upms-bootstrap-v0.2.zip

相信這些例子對你們學習bootstrap會提供必定的幫助。