Nâng cấp lên phiên bản v3.x
Hướng dẫn cách nâng cấp Bootstrap từ phiên bản v2.x lên v3.x bằng việc nhấn mạnh vào những sự thay đổi chính, giói thiệu những cái mới và đào thải một số cái cũ.
Nâng cấp từ phiên bản 2.x lên 3.0
Bootstrap 3 không hỗ trợ tính tương thích ngược với các phiên bản v2.x. Hãy sử dụng bài viết này để biết cách nâng cấp từ phiên bản v2.x lên v3.0. Để có được cái nhìn tổng quan hơn, hãy tham khảo những thay đổi mới trong phiên bản v3.0.
Thay đổi các class chính
Bảng sau sẽ cho bạn thấy những thay đổi về style của phiên bản v3.0 so với v2.x
| 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-error |
.alert-danger |
.visible-phone |
.visible-xs |
.visible-tablet |
.visible-sm |
.visible-desktop |
Split into .visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
Split into .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 thay đổi mới
Chúng tôi đã bổ sung một số phần tử mới cũng như là cập nhật các phần tử cũ. Dưới đây là danh sách các phần tử mới và các phần tử 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 |
| Extra small grid (<768px) | .col-xs-* |
| Small grid (≥768px) | .col-sm-* |
| Medium grid (≥992px) | .col-md-* |
| Large grid (≥1200px) | .col-lg-* |
| Responsive utility classes (≥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-* |
| Input height sizes | .input-sm .input-lg |
| Input groups | .input-group .input-group-addon .input-group-btn |
| Form controls | .form-control .form-group |
| Button group sizes | .btn-group-xs .btn-group-sm .btn-group-lg |
| Navbar text | .navbar-text |
| Navbar header | .navbar-header |
| Justified tabs / pills | .nav-justified |
| Responsive images | .img-responsive |
| Contextual table rows | .success .danger .warning .active .info |
| Contextual panels | .panel-success .panel-danger .panel-warning .panel-info |
| Modal | .modal-dialog .modal-content |
| Thumbnail image | .img-thumbnail |
| Well sizes | .well-sm .well-lg |
| Alert links | .alert-link |
Đào thải
Dưới đây là danh sách các phần tử bị đào thải hoặc cập nhật trong phiên bản v3.0.
| Phần tử | Đào thải khỏi 2.x | Phần tử tương đương trong phiên bản 3.0 |
|---|---|---|
| Form actions | .form-actions |
N/A |
| Search form | .form-search |
N/A |
| Form group with info | .control-group.info |
N/A |
| Fixed-width input sizes | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Hãy sử dụng .form-control và hệ thống lưới. |
| Block level form input | .input-block-level |
Không có phần tử tương đương, nhưng forms controls có thể sử dụng tương tự. |
| Inverse buttons | .btn-inverse |
N/A |
| Fluid row | .row-fluid |
.row (hệ thống lưới không cần cố định nữa) |
| 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ó phần tử tương đương, tuy nhiên nhóm danh sách và .panel-group có thể sử dụng tương tự. |
| Inline help for form controls | .help-inline |
Không có phần tử tương đương, tuy nhiên .help-block có thể sử dụng tương tự. |
| Non-bar-level progress colors | .progress-info .progress-success .progress-warning .progress-danger |
Hãy sử dụng .progress-bar-* trên .progress-bar. |
Các lưu ý
Những thay đổi khác trong phiên bản v3.0 là không thực sự rõ ràng. Các class cơ sở, các style chủ chốt, và các hành vi đều đã được thay đổi để tương ứng với cách tiếp cận ưu tiên điện thoại di động. Dưới đây là danh sách cụ thể:
- Theo mặc định, các form-control dạng text hiện nay chỉ nhận một số ít style. Đối với các màu sắc tập trung và góc bo tròn, hãy sử dụng class
.form-controlđể style cho phần tử. - Các form-control dạng text với class
.form-controlcó chiều rộng 100% theo thiết lập mặc định. Hãy đặt các input vào bên trong của<div class="col-*"></div>để điều khiển chiều rộng của input. .badgekhông còn đi kèm với các class ngữ cảnh (-success,-primary,...)..btncũng phải sử dụng.btn-defaultđể hiển thị dạng mặc định của nút..rowkhông fluid.- Theo mặc định, các hình ảnh sẽ không được áp dụng tính năng responsive nữa. Hãy sử dụng
.img-responsiveđẻ làm co giãn kích thước của<img>. - Các biểu tượng, hiện nay là
.glyphicon, đều được xây dựng dựa trên font. Các biểu tượng cũng đòi hỏi phải sử dụng class cơ sở và một class biểu tượng (Ví dụ:.glyphicon .glyphicon-asterisk). - Typeahead đã bị đào thải, hãy sử dụng Twitter Typeahead.
- Markup của modal đã được thay đổi một cách đáng kể. Các phần
.modal-header,.modal-body, và.modal-footerđược đặt trong.modal-contentvà.modal-dialogđể được style tốt hơn. Ngoài ra, bạn cũng không cần phải thêm class.hidevào.modaltrong markup của bạn. - Trong phiên bản v3.1.0, HTML được tải bởi tùy chọn
remotecủa modal nay được tích hợp vào.modal-content(từ phiên bản v3.0.0 tới v3.0.3, vào.modal) thay vì vào.modal-body. Điều này cho phép bạn có thể dễ dàng thay đổi nội dung của header va footer trong modal, chứ không chỉ nội dung. - Các tính năng checkbox và radio của plugin button.js nay đều sử dụng
data-toggle="buttons"thay vìdata-toggle="buttons-checkbox"hoặcdata-toggle="buttons-radio"trong markup của chúng. - Các sự kiện trong Javascript nay được không gian tên hóa. Ví dụ, để quản lý sự kiện "show" của modal, hãy sử dụng
'show.bs.modal'. Đối với sự kiện "shown" của thành phần điều hướng dạng thẻ, hãy sử dụng'shown.bs.tab',...
Để biết thêm thông tin chi tiết về việc nâng cấp lên phiên bản v3.0, và xem những đoạn code ngắn sử dụng Bootstrap, hãy tham khảo Bootply.