Bootstrap簡介
Bootstrap是一個十分方便的網頁模板,除了統一個版面樣式,它亦提供不同的工具,例如對話窗(Modal)、下拉選單(Dropdown)、分頁(Tab)等,
可算是集百家之大成,適合開發小型網站。
Bootstrap 3.0
Bootstrap 3.0把整個框架重製,核心的網格系統(Grid System)必須更新,這篇筆記主要記錄重大的改變,以及如何在新版本實現舊功能。
可以到這個pull了解最新消息: https://github.com/twbs/bootstrap/pull/6342
預覽Bootstrap 3.0: http://getbootstrap.com/
實作示例: http://examples.getbootstrap.com/
下載: RC2 或 最新編譯版本 (2013-08-16 15:32:18-07:00 16d5e1b)
- 重大變更:
- 不再支援IE 7 及 Firefox 3.6
- CSS整合為單一檔案 (
bootstrap.css
)
一律使用responsive layout ( 移除了bootstrap-responsive.css
) - Typeahead已被移除,請使用typeahead.js代替
- 以Glyphicons圖示代替PNG圖示
圖示需要2個class名稱class=".glyphicon .glyphicon-*"
- 網格系統 - Grid System:
- 移除
.span*
和.offset*
,只剩下.row
和.col-*
- 移除
.row-fluid
和.container-fluid
- 目前有4種Grids,為不同裝置而設:
.col-xs-*
:智能電話 ( <768px ).col-sm-*
:平板 ( ≥768px ).col-md-*
:桌上型電腦 ( ≥992px ).col-lg-*
:桌上型電腦 ( ≥1200px )
主要差別為.col-xs-*
沒有Offsets和Column ordering
- 移除
- CSS:
- Class名稱:
*-important
轉為.*-danger
- 影響包括:buttons, labels, badges, text, alerts & progress bars
- 增加標題class:
h1
=.h1
... ul.unstyled
轉為.list-unstyled
ul.inline
轉為.list-inline
- 移除
.img-polaroid
:
以.img-thumbnail
(只有圖片) 或.thumbnail
(包含標題) 代替 - 支援層式按扭組(Button groups) / 按扭組內加入下拉選單(Dropdown)
- 控制大小的Class名稱: ( 影響 button, input )
-mini 轉為 -xs (Extra small) ; -small 轉為 -sm ; -large 轉為 -lg
如: .btn-mini -> .btn-xs ; .input-small -> .input-sm
- Class名稱:
- 按扭 - Buttons:
- 移除
.btn-inverse
- 必須加入
.btn-default
以使用預設樣式:<button class="btn btn-default"></button>
- 移除
- 表格 - Forms:
- 移除
.input-prepend
和.input-append
,以.input-group
代替 (見下例) - 移除
.form-search
,.controls-row
,.uneditable-input
&.inline-help
- Checkboxes 和 radios 必須以
<div>
包圍:label.checkbox > input
轉為div.checkbox > label > input
- 移除
- 標籤/徽章 - Labels/Badges:
- 移除所有徽章樣式,令其變為中性
- 移除
.label-inverse
- Jumbotron (原名: Hero unit):
- Class名稱:
.hero-unit
轉為.jumbotron
- 導航 - Nav:
- 移除
.nav-list
,以.list-group
代替 (見下例) - 移除左、右、下方分頁(Tabs),請以Javascript plugin及CSS更改
- 導航列 - Navbars:
- 移除
.navbar-search
,請使用.navbar-form
代替 - 不需要以.navbar-inner包圍內容
- Class名稱:
.hero-unit
轉為.navbar-nav
.btn-navbar
轉為.navbar-toggle
.brand
轉為.navbar-brand
- 進度條 - Progress bars:
- 基本結構由
div.progress > div.bar
轉為div.progress > div.progress-bar
請參閱: http://twitter.github.io/bootstrap/components/#progress - 對話窗 - Modals:
- 不再使用
.hide
,請在HTML中移除此class - Accordion 被 Panel 取代
此部分待更新至RC2
以下的資料轉載自Carol Skelly的文章: http://www.bootply.com/migrate-to-bootstrap-3
網格系統: 此部分待更新至RC2
- 你現在可以使用三種網格大小,於平板和電話上消除垂直堆疊 ( 2.x的預設行為 )
示例: http://examples.getbootstrap.com/grid/index.html - 轉換 2.x 的網格至 3.0,你需要:
- 把
.span*
轉為.col-lg-*
- 把
.row-fluid
轉為.row
- 把
.container-fluid
轉為.container
- 想在桌上電腦和平板保持流動寬闊,但在智能電話上垂直堆疊:
- 可以把
.span*
轉為.col-sm-*
- 想在所有裝置保持流動寬闊 (不會垂直堆疊):
- 可以把
.span*
轉為.col-*
- 你亦可組合不同網格,控制不同裝置上的佈局
<div class="row"> <div class="col-xs-12 col-sm-6 col-lg-3"></div> <div class="col-xs-6 col-sm-6 col-lg-9"></div> </div>
混合網格 |
CSS class 名稱變動:
Bootstrap 2.x | Bootstrap 3.0 |
.container-fluid | .container |
.row-fluid | .row |
.span* | .col-lg-* |
.offset* | .col-offset-* |
.brand | .navbar-brand |
.navbar .nav | .nav .navbar-nav |
.hero-unit | .jumbotron |
.icon | .glyphicon |
.btn | .btn .btn-default |
.btn-mini | .btn-small |
.visible-phone | .visible-sm |
.visible-tablet | .visible-md |
.visible-desktop | .visible-lg |
.hidden-phone | .hidden-sm |
.hidden-tablet | .hidden-md |
.hidden-desktop | .hidden-lg |
.input-prepend | .input-group |
.input-append | .input-group |
.add-on | .input-group-addon |
.btn-navbar | .navbar-btn |
Bootstrap 3.0 新增的 classes / 元素
新增元素 | 相關Class |
Panels | .panel |
List Groups | .list-group |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
Small Device Grid | .col-sm-* |
Small Offsets | .col-push-*,.col-pull-* |
Input Groups | .input-group |
Input Add-on | .input-group-addon |
Input Add-on Button | .input-group-btn |
Navbar text | .navbar-text |
Justified Tabs / Pills | .nav-justified |
Responsive Images | .img-responsive |
Bootstrap 3.0 移除的 classes / 元素
元素 | 由 2.x 移除 | 3.0 的 class 名稱 |
Hero Unit | .hero-unit | .jumbotron |
Form actions | .form-actions | n/a |
Grid | .span* | .col-lg-* |
Fluid container | .container-fluid | .container (fluid, fixed 被移除) |
Fluid row | .row-fluid | .row (fluid, fixed 被移除) |
Icons | .icon | .glyphicon |
Navbar button | .btn-navbar | .navbar-btn |
Thumbnails | .thumbnails | .col-* & .thumbnail |
註釋及注意事項 |
.input-* 的寬闊是 100% ; 這會影響 .form-inline |
.badge 移除了情境classes (-success,-primary...) |
.btn 需要加入 '.btn-default' class 來顯示預設樣式 |
.container & .row 變成流動寬闊(fluid) (基於%) |
圖片不再預設響應特性; 使用 IMG.img-responsive 令圖片大小流動 |
圖示( .glyphicons ) 已移到另外的儲存庫 |
本文將持續更新,歡迎留言討論這次的更新!
沒有留言:
發佈留言