Di chuyển từ 2.x sang 3.0

Bootstrap 3 không tương thích ngược với v2.x. Sử dụng phần này làm 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 có gì mới trong thông báo phát hành v3.0.

Những thay đổi lớn về lớp học

Bảng này hiển thị các thay đổi kiểu 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

Có gì mới

Chúng tôi đã thêm các yếu tố mới và thay đổi một số yếu tố hiện có. Đây là các phong cách mới hoặc cập nhật.

Yếu tố Sự mô tả
Bảng điều khiển .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
Liệt kê các nhóm .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-*
Các lớp tiện ích đáp ứng (≥1200px) .visible-lg .hidden-lg
Bù đắp .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Đẩy .col-sm-push-* .col-md-push-* .col-lg-push-*
Sự lôi kéo .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Nhập kích thước chiều cao .input-sm .input-lg
Nhóm đầu vào .input-group .input-group-addon .input-group-btn
Kiểm soát biểu mẫu .form-control .form-group
Kích thước nhóm nút .btn-group-xs .btn-group-sm .btn-group-lg
Văn bản trên thanh điều hướng .navbar-text
Tiêu đề thanh điều hướng .navbar-header
Các tab / viên hợp lý .nav-justified
Hình ảnh đáp ứng .img-responsive
Các hàng trong bảng theo ngữ cảnh .success .danger .warning .active .info
Bảng theo ngữ cảnh .panel-success .panel-danger .panel-warning .panel-info
Phương thức .modal-dialog .modal-content
Hình ảnh thu nhỏ .img-thumbnail
Kích thước giếng .well-sm .well-lg
Liên kết cảnh báo .alert-link

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

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

Yếu tố Đã xóa khỏi 2.x 3.0 Tương đương
Hành động biểu mẫu .form-actions N / A
Form tìm kiếm .form-search N / A
Biểu mẫu nhóm với thông tin .control-group.info N / A
Kích thước đầu vào có chiều rộng cố định .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge Sử dụng .form-controlvà hệ thống lưới thay thế.
Đầu vào biểu mẫu mức khối .input-block-level Không có tương đương trực tiếp, nhưng các điều khiển biểu mẫu là tương tự.
Các nút nghịch đảo .btn-inverse N / A
Hàng linh hoạt .row-fluid .row(không còn lưới cố định)
Kiểm soát trình bao bọc .controls N / A
Kiểm soát hàng .controls-row .rowhoặc.form-group
Navbar bên trong .navbar-inner N / A
Các dải phân cách dọc của thanh điều hướng .navbar .divider-vertical N / A
Menu con thả xuống .dropdown-submenu N / A
Căn chỉnh tab .tabs-left .tabs-right .tabs-below N / A
Khu vực có thể lập bảng dựa trên thuốc viên .pill-content .tab-content
Ngăn khu vực có thể tab dựa trên viên thuốc .pill-pane .tab-pane
Danh sách điều hướng .nav-list .nav-header Không có tương đương trực tiếp, nhưng các nhóm và danh sách tương tự nhau..panel-group
Trợ giúp nội tuyến cho các điều khiển biểu mẫu .help-inline Không có tương đương chính xác, nhưng .help-blocktương tự.
Màu tiến trình không phải ở cấp độ thanh .progress-info .progress-success .progress-warning .progress-danger Sử dụng .progress-bar-*thay .progress-barthế.

Ghi chú bổ sung

Những thay đổi khác trong v3.0 không rõ ràng ngay lập tức. Các lớp cơ sở, kiểu chính và hành vi đã được điều chỉnh cho linh hoạt và cách tiếp cận đầu tiên trên thiết bị di động của chúng tôi . Đây là danh sách một phần:

  • Theo mặc định, các điều khiển biểu mẫu dựa trên văn bản hiện chỉ nhận được kiểu dáng tối thiểu. Đối với màu tiêu điểm và các góc tròn, hãy áp dụng .form-controllớp trên phần tử để tạo kiểu.
  • Các điều khiển biểu mẫu dựa trên văn bản với .form-controllớp được áp dụng hiện có độ rộng 100% theo mặc định. Bọc các đầu vào bên trong <div class="col-*"></div>để kiểm soát độ rộng đầu vào.
  • .badgekhông còn có các lớp theo ngữ cảnh (-success, -primary, v.v.).
  • .btncũng phải sử dụng .btn-defaultđể có được nút "mặc định".
  • .rowbây giờ là chất lỏng.
  • Hình ảnh không còn phản hồi theo mặc định. Sử dụng .img-responsivecho kích thước chất lỏng <img>.
  • Các biểu tượng, bây giờ .glyphicon, bây giờ dựa trên phông chữ. Các biểu tượng cũng yêu cầu một lớp cơ sở và biểu tượng (ví dụ .glyphicon .glyphicon-asterisk).
  • Typeahead đã bị loại bỏ, chuyển sang sử dụng Twitter Typeahead .
  • Đánh dấu phương thức đã thay đổi đáng kể. Các phần .modal-headervà .modal-bodyvà .modal-footerhiện được bao bọc trong .modal-contentvà .modal-dialogđể tạo kiểu dáng và hành vi trên thiết bị di động tốt hơn. Ngoài ra, bạn không nên áp dụng .hidecho mục .modalđánh dấu của mình nữa.
  • Kể từ v3.1.0, HTML được tải bởi remotetùy chọn phương thức hiện được đưa 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 đầu trang và chân trang của phương thức, không chỉ nội dung phương thức.
  • Hộp kiểm và các tính năng radio của plugin button.js giờ đây đều sử dụng data-toggle="buttons"thay cho data-toggle="buttons-checkbox"hoặc data-toggle="buttons-radio"trong phần đánh dấu của chúng.
  • Các sự kiện JavaScript có không gian tên. Ví dụ: để xử lý sự kiện "hiển thị" theo phương thức, hãy sử dụng 'show.bs.modal'. Đối với các tab được "hiển thị" 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 mã từ cộng đồng, hãy xem Bootply .