1. 程式人生 > >Web前端學習筆記:Bootstrap框架

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的截圖是:

下載連結:

我整理的例項:

我做的demo:

相信這些例子對大家學習bootstrap會提供一定的幫助。