Di chuyển sang v3.x
Hướng dẫn cách nâng cấp từ Bootstrap v2.x lên v3.x với trọng tâm là những thay đổi lớn, những gì mới và những gì đã bị xóa.
Hướng dẫn cách nâng cấp từ Bootstrap v2.x lên v3.x với trọng tâm là những thay đổi lớn, những gì mới và những gì đã bị xóa.
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.
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 |
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 |
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-control và 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 |
.row hoặ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-block tươ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-bar thế. |
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:
.form-control
lớp trên phần tử để tạo kiểu..form-control
lớ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..badge
không còn có các lớp theo ngữ cảnh (-success, -primary, v.v.)..btn
cũng phải sử dụng .btn-default
để có được nút "mặc định"..row
bây giờ là chất lỏng..img-responsive
cho kích thước chất lỏng <img>
..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
)..modal-header
và .modal-body
và .modal-footer
hiện được bao bọc trong .modal-content
và .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 .hide
cho mục .modal
đánh dấu của mình nữa.remote
tù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.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.'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 .