Bootstrap(轉)

Bootstrap

隨着互聯網的不斷成熟以及咱們愈來愈多的用各類移動端的設備訪問互聯網，Web設計師和Web開發者的工做也變得愈來愈複雜。

十年前，一切都還簡單得多。那個時候，大部分用戶都是坐在桌子前經過一個大大的顯示器來瀏覽咱們的網頁。960像素是當時比較合理的網頁寬度。那些年咱們的開發工做主要就是跟十幾個桌面瀏覽器打交道，並經過添加幾個瀏覽器的hack，來兼容詭異的舊版本 IE 瀏覽器。時至今日，隨着過去五六年間手持電子設備的日新月異，一切都變了樣。咱們看到各類尺寸的智能手機和平板層出不窮，電子閱讀器，以及電視設備上的瀏覽器等也不斷涌現。這種設備的多樣性正在與日俱增。

能夠預見，在不遠的未來，相對於使用臺式機，愈來愈多的人會使用移動設備來訪問互聯網。事實上，已經有至關數量的一部分人只經過智能手機上網。這意味着，咱們這些Web設計師和開發者須要知道如何在龐大的移動端王國裏呈現以及適配咱們的產品，這相當重要。在撰寫本文的時候，儘管咱們還沒完全搞明白如何將桌面端呈現的所有內容在手持設備中呈現一樣的效果，可是用於實現這一目標的技術以及工具正在變得愈來愈好。

在不知道瀏覽設備屏幕大小的時候，最主要的策略就是使用響應式網頁設計。它是一種根據設備瀏覽窗口的尺寸大小來輸出相應頁面佈局的方法。小型移動設備（如智能手機以及平板電腦）上的大多數瀏覽器會默認將一個網頁縮小到適應本身的屏幕尺寸，而後用戶能夠經過縮放以及滾動等方法瀏覽整個網頁。這種方法在技術上是可行的，可是從用戶體驗的角度上講卻比較糟糕。小屏幕上文字過小閱讀不方便，連接過小難以點擊，縮放以及滾動的操做多多少少會讓人在閱讀的時候分心。

響應式網頁設計利用一樣的HTML文檔來適配全部的終端設備，響應式網頁設計會根據設備屏幕的大小加載不一樣的樣式，從而在不一樣的終端設備上呈現最優的網頁佈局。舉個例子，當你在大屏幕桌面瀏覽器中查看一個網頁的時候，網頁的內容多是分爲不少列的，而且有常見的導航條。若是你在小屏幕的智能手機上查看一樣的頁面，你會發現頁面的內容呈如今同一列中，而且導航按鈕足夠大，點擊起來很方便。你能夠在Media Queries這個網站上看到不少響應式網頁設計的案例。在你的瀏覽器中隨便點開一個設計案例，而後改變瀏覽器窗口的大小，你會看到網頁的佈局會根據窗口大小相應變化。

到目前爲止，咱們能夠看出，響應式網頁設計能夠有效地幫助咱們應對日益增加的終端設備多樣性。那麼在咱們設計網頁的時候有哪些實際可用的工具以及技術能夠用來實現響應式網頁設計呢？咱們每一個人都須要成爲web大師才能駕馭這門技術麼？或者是利用咱們已經掌握的web基本知識就已經足夠了？目前有什麼工具能夠幫到咱們麼？

這時候前端開發框架華麗登場。響應式網頁設計實現起來並不困難，可是要讓它在全部的目標設備上都正常運做會有一點小棘手。框架可讓這一工做變得簡單。利用框架，你能夠花最少的力氣建立響應式且符合標準的網站，一切都很簡單而且具備一致性。使用框架有不少好處，好比說簡單快速，以及在不一樣的設備之間的一致性等等。框架最大的優點就是簡單易用，即便只掌握少許的web知識，你也能夠毫無障礙的使用它們。

簡而言之，若是你認真對待目前的web開發工做，那麼使用框架進行開發就不是可選項而是必需要作的事情。你的站點必須高度靈活以適應不一樣的瀏覽器，平板，智能手機以及其餘各類各樣的手持設備。

一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合，咱們能夠在設計中使用它們。前端開發框架有不少，其中有一些寫得很棒。爲了你們的使用便利，下文列舉了目前最強大應用最普遍的幾款前端開發框架。記住，這些框架並不只僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。

 

1. Bootstrap

Boostrap絕對是目前最流行用得最普遍的一款框架。它是一套優美，直觀而且給力的web設計工具包，能夠用來開發跨瀏覽器兼容而且美觀大氣的頁面。它提供了不少流行的樣式簡潔的UI組件，柵格系統以及一些經常使用的JavaScript插件。

Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：

• 腳手架——全局樣式，響應式的12列柵格佈局系統。記住Bootstrap在默認狀況下並不包括響應式佈局的功能。所以，若是你的設計須要實現響應式佈局，那麼你須要手動開啓這項功能。
• 基礎CSS——包括基礎的HTML頁面要素，好比表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS爲這些要素提供了優雅，一致的多種樣式。
• 組件——收集了大量能夠重用的組件，以下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標籤，麪包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
• JavaScript——包括一系列jQuery的插件，這些插件能夠實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。

Bootstrap已經足夠強大，可以實現各類形式的 Web 界面。爲了更加方便地利用Bootstrap進行開發，不少工具和資源能夠用來配合使用，下面列舉了其中的一部分工具和資源。

• jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來講這是個很是好的資源，可以把 Bootstrap的清爽界面組件引入到jQuery UI中。
• jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題相似，這是一個爲jQuery mobile創建的主題。若是你想讓用Bootstrap開發的網站在手機端也能夠優雅訪問，那麼這個資源對你來講很方便易用。
• Fuel UX —— 它爲Bootstrap添加了一些輕量的JavaScript控件。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
• StyleBootstrap.info —— Bootstrap提供了本身的幾種界面風格，StyleBootstrap提供了更多的配色選項，而且你能夠給每一個組件都應用不一樣的配色。
• BootSwatchr —— 利用這個工具你能夠馬上查看主題修改後的效果。對於每一次變更的效果，這個應用都會生成一個惟一的URL方便你與他人分享，你也能夠在任意時刻修改你的主題。
• Bootswatch —— 提供大量免費的Bootstrap主題。
• Bootsnipp —— 在線前端框架交互組件製做工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
• LayoutIt —— 經過界面拖放生成器簡便快捷地建立基於Bootstrap的前端代碼。經過拖放動做將Bootstrap風格的組件加入到你的我的設計裏而且能夠方便地修改他們的屬性，簡單便捷。

2. Fbootstrapp

Fbootstrapp基於Bootstrap而且提供了跟Facebook iframe apps和設計相同的功能。包含用於全部標準組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook相似。

 

3. BootMetro

BootMetro框架的靈感來自於Metro UI CSS，基於Bootstrap 框架構建，用於建立Windows 8 的Metro風格的網站。它包括全部Bootstrap的功能，並添加了幾個額外的功能，好比頁面平鋪，應用程序欄等等。

 

4. Kickstrap

Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架能夠單獨地用於構建網站，而不須要額外安裝什麼。你須要作的僅僅是把它放到你的網站上，而後用就能夠了。

App 是一些頁面加載完成以後加載運行的JavaScript和CSS打包文件。默認加載的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也能夠自行添加更多的app。

選擇不一樣的主題可讓你的網站在衆多Bootstrap構建的相似網站中顯得不同凡響。

附加功能是一些用來擴展Bootstrap UI 庫的附件，它們的語法基本相同或者類似。