Chuyển đổi từ 2.x lên 3.0

Bootstrap 3 không tương thích ngược với v2.x. Sử dụng phần này như một hướng dẫn chung để nâng cấp từ v2.x lên v3.0. Để có cái nhìn tổng quan hơn, hãy xem những gì mới trong thông báo phát hành v3.0.

Các thay đổi lớn về class

Bảng này hiển thị các thay đổi kiểu dáng giữa v2.x và v3.0.

Bootstrap 2.x Bootstrap 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 Chia thành .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Chia thành .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

Những gì mới

Chúng tôi đã thêm các phần tử mới và thay đổi một số phần tử hiện có. Đây là các kiểu mới hoặc đã được cập nhật.

Phần tử Mô tả
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Lưới cực nhỏ (<768px) .col-xs-*
Lưới nhỏ (≥768px) .col-sm-*
Lưới trung bình (≥992px) .col-md-*
Lưới lớn (≥1200px) .col-lg-*
Class tiện ích phản hồi (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Kích thước chiều cao input .input-sm .input-lg
Nhóm input .input-group .input-group-addon .input-group-btn
Ưu controls .form-control .form-group
Kích thước nhóm nút .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
Hình ảnh phản hồi .img-responsive
Dòng bảng ngữ cảnh .success .danger .warning .active .info
Panels ngữ cảnh .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Hình ảnh thumbnail .img-thumbnail
Kích thước Well .well-sm .well-lg
Alert links .alert-link

Những gì đã bị loại bỏ

Các phần tử sau đây đã bị bỏ hoặc thay đổi trong v3.0.

Phần tử Đã bị loại bỏ từ 2.x Tương đương 3.0
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Kích thước input cố định .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Sử dụng .form-control và hệ thống lưới thay thế.
Block level form input .input-block-level Không có tương đương trực tiếp, nhưng form controls tương tự.
Inverse buttons .btn-inverse N/A
Fluid row .row-fluid .row (không còn lưới cố định)
Controls wrapper .controls N/A
Controls row .controls-row .row hoặc .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right .tabs-below N/A
Pill-based tabbable area .pill-content .tab-content
Pill-based tabbable area pane .pill-pane .tab-pane
Nav lists .nav-list .nav-header Không có tương đương trực tiếp, nhưng list groups và .panel-groups tương tự.
Inline help for form controls .help-inline Không có tương đương chính xác, nhưng .help-block tương tự.
Non-bar-level progress colors .progress-info .progress-success .progress-warning .progress-danger Sử dụng .progress-bar-* trên .progress-bar thay thế.

Ghi chú bổ sung

Các thay đổi khác trong v3.0 không immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • Mặc định, các form controls dựa trên text giờ đây chỉ nhận định kiểu tối thiểu. Để có màu sắc focus và góc bo tròn, áp dụng class .form-control trên phần tử cần định kiểu.
  • Các form controls dựa trên text với class .form-control được áp dụng giờ đây có chiều rộng 100% theo mặc định. Bao quanh inputs trong <div class="col-*"></div> để kiểm soát chiều rộng input.
  • .badge không còn có class ngữ cảnh (-success,-primary,v.v..).
  • .btn cũng phải sử dụng .btn-default để có nút "mặc định".
  • .row giờ đây là fluid.
  • Hình ảnh không còn phản hồi theo mặc định. Sử dụng .img-responsive cho kích thước <img> fluid.
  • Các icon, giờ đây .glyphicon, giờ đây dựa trên font. Các icon cũng yêu cầu một class cơ sở và icon (ví dụ .glyphicon .glyphicon-asterisk).
  • Typeahead đã bị bỏ, thay vào đó sử dụng Twitter Typeahead.
  • Modal markup đã thay đổi đáng kể. Các phần .modal-header, .modal-body, và .modal-footer giờ đây được bao quanh trong .modal-content và .modal-dialog để có kiểu dáng và hành vi mobile tốt hơn. Ngoài ra, bạn không nên áp dụng .hide cho .modal trong markup của bạn nữa.
  • Từ v3.1.0 trở đi, HTML được tải bởi tùy chọn modal remote giờ đây được inject vào .modal-content (từ v3.0.0 đến v3.0.3, vào .modal) thay vì vào .modal-body. Điều này cho phép bạn cũng dễ dàng thay đổi header và footer của modal, không chỉ body của modal.
  • Các tính năng checkbox và radio của plugin button.js giờ đây đều sử dụng data-toggle="buttons" thay vì data-toggle="buttons-checkbox" hoặc data-toggle="buttons-radio" trong markup của chúng.
  • Các sự kiện JavaScript được namespaced. Ví dụ, để xử lý sự kiện "show" của modal, sử dụng 'show.bs.modal'. Đối với tabs "shown" sử dụng 'shown.bs.tab', v.v..

Để biết thêm thông tin về việc nâng cấp lên v3.0, và các đoạn code từ cộng đồng, hãy xem Bootply.