從 2.x 遷移到 3.0

Bootstrap 3 不向後兼容 v2.x。使用本節作為從 v2.x 升級到 v3.0 的一般指南。如需更廣泛的概述，請參閱v3.0 發佈公告中的新增功能。

大類變化

此表顯示了 v2.x 和 v3.0 之間的樣式變化。

引導程序 2.x 引導程序 3.0
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .navbar-nav
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert .alert .alert-warning
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop 拆分成.visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop 拆分成.hidden-md .hidden-lg
.input-block-level .form-control
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.label .label .label-default
.label-important .label-danger
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

什麼是新的

我們添加了新元素並更改了一些現有元素。這是新的或更新的樣式。

元素 描述
面板 .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
列出組 .list-group .list-group-item .list-group-item-text .list-group-item-heading
字形 .glyphicon
超大屏幕 .jumbotron
超小網格（<768px） .col-xs-*
小網格（≥768px） .col-sm-*
中網格（≥992px） .col-md-*
大網格（≥1200px） .col-lg-*
響應式實用程序類（≥1200px） .visible-lg .hidden-lg
偏移量 .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
推 .col-sm-push-* .col-md-push-* .col-lg-push-*
拉 .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
輸入高度尺寸 .input-sm .input-lg
輸入組 .input-group .input-group-addon .input-group-btn
表單控件 .form-control .form-group
按鈕組大小 .btn-group-xs .btn-group-sm .btn-group-lg
導航欄文本 .navbar-text
導航欄標題 .navbar-header
合理的標籤/藥丸 .nav-justified
響應式圖像 .img-responsive
上下文表行 .success .danger .warning .active .info
上下文面板 .panel-success .panel-danger .panel-warning .panel-info
模態 .modal-dialog .modal-content
縮略圖 .img-thumbnail
井尺寸 .well-sm .well-lg
警報鏈接 .alert-link

刪除了什麼

v3.0 中刪除或更改了以下元素。

元素 從 2.x 中移除 3.0 等效
表單操作 .form-actions 不適用
搜索表格 .form-search 不適用
包含信息的表單組 .control-group.info 不適用
固定寬度的輸入大小 .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge 使用.form-control和網格系統代替。
塊級表單輸入 .input-block-level 沒有直接的等價物，但表單控件是相似的。
反向按鈕 .btn-inverse 不適用
流體排 .row-fluid .row（不再有固定網格）
控件包裝器 .controls 不適用
控制行 .controls-row .row或者.form-group
導航欄內 .navbar-inner 不適用
導航欄垂直分隔線 .navbar .divider-vertical 不適用
下拉子菜單 .dropdown-submenu 不適用
製表符對齊 .tabs-left .tabs-right .tabs-below 不適用
基於藥丸的標籤區域 .pill-content .tab-content
基於 Pill 的可選項卡區域窗格 .pill-pane .tab-pane
導航列表 .nav-list .nav-header 沒有直接的等價物，但list groups和.panel-groups是相似的。
表單控件的內聯幫助 .help-inline 沒有確切的等價物，但.help-block相似。
非條形進度顏色 .progress-info .progress-success .progress-warning .progress-danger 改為使用.progress-bar-*。.progress-bar

補充說明

v3.0 中的其他變化不是很明顯。基類、關鍵樣式和行為已針對靈活性和我們的移動優先方法進行了調整。這是部分列表：

  • 默認情況下，基於文本的表單控件現在只接收最少的樣式。對於焦點顏色和圓角，將.form-control元素上的類應用於樣式。
  • 應用了類的基於文本的表單控件.form-control現在默認為 100% 寬。將輸入包裝在內部<div class="col-*"></div>以控制輸入寬度。
  • .badge不再有上下文（-success、-primary 等）類。
  • .btn還必須使用.btn-default來獲取“默認”按鈕。
  • .row現在是流體。
  • 默認情況下，圖像不再響應。用於.img-responsive流體<img>尺寸。
  • 現在的圖標現在.glyphicon是基於字體的。圖標還需要一個基類和圖標類（例如.glyphicon .glyphicon-asterisk）。
  • Typeahead 已被刪除，轉而使用Twitter Typeahead。
  • 模態標記發生了顯著變化。、和部分現在包含在和中.modal-header，以實現更好的移動樣式和行為。此外，您不應再在標記中應用to 。.modal-body.modal-footer.modal-content.modal-dialog.hide.modal
  • 從 v3.1.0 開始，由remotemodal 選項加載的 HTML 現在被注入.modal-content（從 v3.0.0 到 v3.0.3，注入.modal）而不是注入.modal-body. 這使您還可以輕鬆地改變模態的頁眉和頁腳，而不僅僅是模態體。
  • button.js 插件的複選框和單選功能現在都使用data-toggle="buttons"而不是data-toggle="buttons-checkbox"在data-toggle="buttons-radio"它們的標記中使用。
  • JavaScript 事件是命名空間的。例如，要處理模態“show”事件，請使用'show.bs.modal'. 對於“顯示”的標籤，請使用'shown.bs.tab'等。

有關升級到 v3.0 的更多信息以及來自社區的代碼片段，請參閱Bootply。