推ter Bootstrap 框架介紹

Bootstrap 是 推ter 搞的一個框架，目的是有個工具可以方便快速搞起一個項目，樣式部分使用 Less 寫就，也提供了一些 jQuery 插件形式的擴展。對景德鎮居民來說，它比較狠的是直接不支持 IE6，許多特效、屬性在 IE7、8 里頭也是捉襟見肘；因此，如果你的網站放不下這部分用戶，還是先不要用了，或者可以參考著整一個自己的版本。Bootstrap 的代碼托管在 Github，隨時可以 fork。

樣式方面，它提供了如下解決方案：

• 柵格系統
• 布局
• 字體樣式
• 多媒體展現
• 表格
• 導航
• 警告與提示
• 彈出浮層

柵格系統與比較著名的 960 Grid 大同小異，不過丫默認是16欄，940像素寬，此外一個特性是，因為 Less 帶來的動態語言特性（變量、函數等），可以通過配置幾個參數，自定義自己的柵格。因為拋棄了老舊瀏覽器支持，可以直接用 :last-child 將最后一欄的 margin-right 去掉，這也是它與 960 Grid 的差別之一。

布局也是老生常談，一個固定寬度的居中，一個可變寬度的浮動布局。

字體設置里的風格比較明顯，標題、em、strong、b、i 以及 address，都配了一些樣式。在 blockquote 的樣式里頭，利用 before 屬性，加上了個 ‐。然后是列表，通過 .unstyled 類，獲得樣式充值效果；這個方式其實我也比較喜歡，特別是網站是以內容為主的時候。代碼塊也比較樸素，推薦了 Google Code Prettify。

接著這個就比較貼心的了，很常用的 eye candy，內斂標簽。

多媒體列表其實也比較簡單，明確了三種縮略圖尺寸 330×230、210×150 和 90×90。至于你的網站如何做，可能還是悉聽尊便吧。表格的樣式也是簡約風格。

Bootstrap 對表單做了比較充分的定制，風格上比較明確，label 左浮動，圓角輸入框。正確、錯誤的狀態，表單 legend 的字號，前綴字符，輸入、復選框等。文件選擇的東東比較樸素，基本是老樣子，也沒有采用一些風騷的解決方案（那些基本需要與 JavaScript 配合搞）。表單的按鈕也十分細致。

網站的全局導航欄，風格一以貫之，使用樣式實現背景色漸變，固定在頭部；同樣，因為不需要考慮老舊瀏覽器，放心地 position: fixed; 就夠了。

此外，還實現了提示、警告：

區塊風格的消息提示：

面包屑導航：

翻頁：

以上是樣式的部分，是 Bootstrap 框架的主打。在代碼上，基本把樣式重置與定制都做掉了，上述內容，出了比較明顯的組件如面包屑、翻頁等，基本都是直接用標簽做選擇器的。不過，框架就該簡單直接，對吧？有許多風格是利用較新的樣式屬性搞出來的，最明顯的莫過于背景色漸變與圓角（gradient、border-radius、box-shadow 等）。因此，對于圖省事、不介意老瀏覽器看起來效果差些，IE6 不需要管的開發者，Bootstrap 是個好選擇，省時省力，美觀大方。

在樣式之外，Bootstrap 還提供了幾個常用的 JavaScript 實現的效果。模態框、提示浮層、表格的排序等等，jQuery 插件的形式。夜了，按下不表。