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-unstyledul.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 ) 已移到另外的儲存庫 |
本文將持續更新，歡迎留言討論這次的更新！
沒有留言:
發佈留言