twitter公司的Bootstrap - 部落格

官網 http://wrongwaycn.github.com/bootstrap/docs/index.html

教學下載 http://www.verycd.com/topics/2929861/

先跟各位說抱歉 我個人並不專精於這類程式

僅出於分享新知的精神 來和各位分享 所以無法解決困惑

但希望有看過此篇 後專精於此的人 來跟大家分享成果

第三方介紹 http://www.infoq.com/cn/news/2012/02/bootstrap-2.0.1-released

原文簡體


簡介

Bootstrap是著名的社交網站、微博的先驅Twitter在2011年8月推出的開源WEB前端框架，
集合CSS和HTML，使用了最新的瀏覽器技術，為快速WEB開發提供了一套前端工具包，包括
佈局、網格、表格、按鈕、表單、導航、提示等等。使用Bootstrap可以構建出非常優雅
的前端界面，而且佔用資源非常小。

Bootstrap發佈時間不長，但是已經非常成熟了，目前最新版本是2.0，包括完整的CSS編
譯和非編譯版本，樣例模板和Javascript插件。

歷史

早期Twitter的前端工程師幾乎採用了任何自己熟悉的庫來應對前端的開發需求，這樣的
造成的問題就是維護和擴展非常困難。最終Bootstrap成為應對這些挑戰的解決方案，並
開始在Twitter內部迅速成長，被twitter.com廣泛採用，形成了穩定版本。隨著工程師對
其不斷的開發和完善，Bootstrap進步顯著，不僅包括基本樣式，而且有了更為優雅和持
久的前端設計模式。2011年8月，Twitter將其開源，相關地址：
http://twitter.github.com/bootstrap

使用Bootstrap構建優雅的Web Page

Bootstrap的核心就是基於Less框架構建的CSS。所以談到Bootstrap，就必須得說說Less
。

關於Less

Less是一個動態CSS語言框架，官方網站是http://lesscss.org/。Less擴展了CSS的動態
特性，相對於傳統的CSS，Less提供了更為強大的功能和靈活性。基於Less，我們可以在
編寫CSS時使用嵌入式申明、變量、混合模式、運算和顏色編輯功能函數等。簡單來說就
是Less可以讓你像編程一樣編寫CSS，把程序存儲在後綴為less的文件中，Less提供了框
架將其編譯為標準的css文件。舉個簡單的例子，如果你想為多個樣式設置同一個顏色，
可以這樣寫：

@color: #FFFFFF;
h1 {
color: @color;
}
#sub{
color: @color;
}
編譯後的css就是：

h1 {
color: #ffffff;
}
#sub {
color: #ffffff;
}
以上代碼只是Less的最簡應用。除了變量，還可以在CSS進行數學運算、傳參、文件相互
引用、規則嵌套等等。可以想像，這種編寫CSS的方式會為前端開髮帶來多大的改變。無
論是從靈活性、擴展性和可維護性上，Less都讓CSS開發有了大幅提升，動態性增強了。

編譯Less的方式很簡單，有兩種方式，一種是在使用時編譯。下載less.js，在樣式中引
用：

<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">
<script src="js/less.js" type="text/javascript"></script>

還有一種方式是使用前編譯好，可以通過服務器端的Node.js進行編譯，也可以到這個網
站http://incident57.com/less/下載Less.app，提供了GUI方式編譯less文件，目前只支
持Mac OS X。

基於Less編譯的Bootstrap

使用了Less的Bootstrap具備如下優點：

Bootstrap實現起來依舊很簡單，使用也很簡單，把Bootstrap.css拖入你的代碼即可。編
譯less文件可以使用less.js，Less.app或Node.js等多種方案實現。
一旦編譯，Bootstrap框架僅包含CSS文件，這意味著沒有多餘的圖片、Flash或
Javascript，只有用於Web應用開發的簡潔而強大的CSS樣式。
兼容性

目前Bootstrap的最新版本是2.0.1，支持幾乎所有的主流瀏覽器，包括Safari、Chrome，
Firefox、IE7.0及以上，最新版本還支持智能手機WebUI。

2.0的新特性

Bootstrap的版本更新很快，2011年11月剛發布了1.4，2012年2月份就再次放出新版本2.0
，而且有了大幅改進。

2.0版本採用了更靈活也更受歡迎的12欄網格佈局，並以此來實現其各種佈局框架。增加
了響應式設計，以適應各種移動終端的需求。完善和改進原有樣式庫，並提供更豐富的新
樣式，包括樣式繁多的圖標（icon），漂亮易用的進度條等。改進和增加了自定義jQuery
插件，完善文檔，修復bug，同時還提供了很多基於Bootstrap構建的網站樣例。

已經使用1.4的開發者也不用擔心，Bootstrap專門提供了從1.4升級到2.0的手工嚮導可以
參考。

功能集合

Bootstrap2.0把現有框架進行了清晰的功能劃分，主要分為框架（Scaffolding），基礎
CSS，構件庫和jQuery插件庫。

Scaffolding主要提供基於網格的各種佈局，包括普通網格系統、嵌入式網格，固定佈局
、自適應佈局，同時可以對網格和佈局進行自定義。

Bootstrap2.0提供了響應式設計，可以通過單個文件支持各種手持設備，自適應不同的設
備和屏幕變化。

基礎CSS包括各種排版樣式（標題、段落、引用塊、列表、內聯標籤等），代碼展示方面
提供了基於code標籤的內嵌代碼，基於pre的塊代碼和基於Google Prettify的代碼樣式。
同時提供各種表格、表單、按鈕、圖標的展示方式。

構件庫提供了基於按鈕、導航、標籤、排版、警告、進度欄、圖像網格等控件。

jQuery插件庫則提供了十幾種插件實現動態效果，例如Modal、Dropdown、Tab、Tooltip
、Popover、Carousel等，開發者可以根據自己的業務需求使用不同的插件實現各種動態
效果。

--

如果找不到不愛你或愛你的理由
▁▁
都可以是愛你或不愛你的理由 ▕Ａ６▏
▕出品▏
我想你要的是愛 不是理由 ￣￣

--