Source

Chuyển sang v4

Bootstrap 4 là một bản viết lại chính của toàn bộ dự án. Những thay đổi đáng chú ý nhất được tóm tắt dưới đây, tiếp theo là những thay đổi cụ thể hơn đối với các thành phần có liên quan.

Thay đổi ổn định

Chuyển từ bản Beta 3 sang bản phát hành v4.0 ổn định của chúng tôi, không có thay đổi đột phá nào, nhưng có một số thay đổi đáng chú ý.

In ấn

  • Sửa các tiện ích in bị hỏng. Trước đây, việc sử dụng một .d-print-*lớp sẽ bất ngờ vượt quá bất kỳ .d-*lớp nào khác. Bây giờ, chúng khớp với các tiện ích hiển thị khác của chúng tôi và chỉ áp dụng cho phương tiện đó ( @media print).

  • Mở rộng các tiện ích hiển thị bản in có sẵn để phù hợp với các tiện ích khác. Beta 3 trở lên chỉ có block, và . Đã thêm phiên bản ổn định v4 ,, và .inline-blockinlinenoneflexinline-flextabletable-rowtable-cell

  • Đã sửa lỗi hiển thị xem trước bản in trên các trình duyệt với các kiểu in mới chỉ định @page size.

Các thay đổi trong bản beta 3

Mặc dù Beta 2 đã chứng kiến ​​phần lớn các thay đổi đột phá của chúng tôi trong giai đoạn beta, nhưng chúng tôi vẫn có một số thay đổi cần được giải quyết trong bản phát hành Beta 3. Những thay đổi này áp dụng nếu bạn đang cập nhật lên Beta 3 từ Beta 2 hoặc bất kỳ phiên bản Bootstrap nào cũ hơn.

Điều khoản khác

  • Đã xóa $thumbnail-transitionbiến không sử dụng. Chúng tôi đã không chuyển đổi bất cứ điều gì, vì vậy nó chỉ là mã bổ sung.
  • Gói npm không còn bao gồm bất kỳ tệp nào ngoài tệp nguồn và tệp dist của chúng tôi; nếu bạn dựa vào chúng và đang chạy các tập lệnh của chúng tôi qua node_modulesthư mục, bạn nên điều chỉnh quy trình làm việc của mình.

Các hình thức

  • Viết lại cả hộp kiểm tùy chỉnh và mặc định và radio. Bây giờ, cả hai đều có cấu trúc HTML phù hợp (bên ngoài <div>với anh chị em <input>và <label>) và cùng một kiểu bố cục (mặc định xếp chồng lên nhau, nội tuyến với lớp bổ trợ). Điều này cho phép chúng tôi tạo kiểu cho nhãn dựa trên trạng thái của đầu vào, đơn giản hóa hỗ trợ cho disabledthuộc tính (trước đây yêu cầu một lớp cha) và hỗ trợ tốt hơn cho việc xác thực biểu mẫu của chúng tôi.

    Là một phần của điều này, chúng tôi đã thay đổi CSS để quản lý nhiều background-imagehộp kiểm trên biểu mẫu tùy chỉnh và radio. Trước đây, .custom-control-indicatorphần tử hiện đã bị loại bỏ có màu nền, độ dốc và biểu tượng SVG. Tùy chỉnh gradient nền có nghĩa là thay thế tất cả chúng mỗi khi bạn cần thay đổi chỉ một. Bây giờ, chúng ta có .custom-control-label::beforemàu tô và độ dốc và .custom-control-label::afterxử lý biểu tượng.

    Để thực hiện một dòng kiểm tra tùy chỉnh, hãy thêm .custom-control-inline.

  • Đã cập nhật bộ chọn cho các nhóm nút dựa trên đầu vào. Thay vì [data-toggle="buttons"] { }cho kiểu và hành vi, chúng tôi sử dụng datathuộc tính chỉ cho các hành vi JS và dựa vào một .btn-group-togglelớp mới để tạo kiểu.

  • Đã loại bỏ .col-form-legendđể có một chút cải tiến .col-form-label. Theo cách này .col-form-label-smvà .col-form-label-lgcó thể được sử dụng trên <legend>các phần tử một cách dễ dàng.

  • Đầu vào tệp tùy chỉnh đã nhận được một thay đổi đối với $custom-file-textbiến Sass của chúng. Nó không còn là một bản đồ Sass lồng nhau và giờ chỉ cấp nguồn cho một chuỗi — Browsenút đó hiện là phần tử giả duy nhất được tạo ra từ Sass của chúng tôi. Văn Choose filebản bây giờ đến từ .custom-file-label.

Nhóm đầu vào

  • Các phần bổ trợ của nhóm đầu vào hiện dành riêng cho vị trí của chúng so với một đầu vào. Chúng tôi đã bỏ .input-group-addonvà .input-group-btncho hai lớp mới, .input-group-prependvà .input-group-append. Bạn phải sử dụng một cách rõ ràng một phần phụ hoặc một phần trước ngay bây giờ, đơn giản hóa phần lớn CSS của chúng tôi. Trong một phần thêm hoặc phần trước, hãy đặt các nút của bạn giống như chúng sẽ tồn tại ở bất kỳ nơi nào khác, nhưng bọc văn bản vào trong .input-group-text.

  • Các kiểu xác thực hiện đã được hỗ trợ, cũng như nhiều đầu vào (mặc dù bạn chỉ có thể xác thực một đầu vào cho mỗi nhóm).

  • Các lớp định cỡ phải nằm trên lớp cha .input-groupchứ không phải các phần tử biểu mẫu riêng lẻ.

Các thay đổi trong bản beta 2

Trong khi ở giai đoạn thử nghiệm, chúng tôi mong muốn không có thay đổi đột phá nào. Tuy nhiên, không phải lúc nào mọi thứ cũng diễn ra theo kế hoạch. Dưới đây là những thay đổi cơ bản cần lưu ý khi chuyển từ Beta 1 sang Beta 2.

Phá vỡ

  • Đã loại bỏ $badge-colorbiến và việc sử dụng nó vào .badge. Chúng tôi sử dụng một hàm tương phản màu sắc để chọn colordựa trên background-color, vì vậy biến là không cần thiết.
  • Đã đổi tên grayscale()chức năng gray()để tránh xung đột với grayscalebộ lọc gốc CSS.
  • Đã đổi tên .table-inverse, .thead-inversevà .thead-defaultthành .*-darkvà .*-light, phù hợp với các sơ đồ màu của chúng tôi được sử dụng ở những nơi khác.
  • Các bảng đáp ứng hiện tạo các lớp cho mỗi điểm ngắt lưới. Điều này khác với phiên bản Beta 1 ở chỗ phiên bản .table-responsivebạn đang sử dụng giống hơn .table-responsive-md. Bây giờ bạn có thể sử dụng .table-responsivehoặc .table-responsive-{sm,md,lg,xl}khi cần thiết.
  • Đã loại bỏ hỗ trợ Bower vì trình quản lý gói đã không còn được dùng cho các lựa chọn thay thế (ví dụ: Yarn hoặc npm). Xem bower / bower # 2298 để biết thêm chi tiết.
  • Bootstrap vẫn yêu cầu jQuery 1.9.1 trở lên, nhưng bạn nên sử dụng phiên bản 3.x vì các trình duyệt được hỗ trợ của v3.x là những trình duyệt mà Bootstrap hỗ trợ cùng với v3.x có một số bản sửa lỗi bảo mật.
  • Đã xóa .form-control-labellớp không sử dụng. Nếu bạn đã sử dụng lớp này, thì nó là bản sao của .col-form-labellớp có căn giữa theo chiều dọc <label>với đầu vào được liên kết của nó trong bố cục biểu mẫu ngang.
  • Đã thay đổi color-yiqtừ một mixin bao gồm thuộc colortính thành một hàm trả về giá trị, cho phép bạn sử dụng nó cho bất kỳ thuộc tính CSS nào. Ví dụ, thay vì color-yiq(#000), bạn sẽ viết color: color-yiq(#000);.

Điểm nổi bật

  • Đã giới thiệu pointer-eventscách sử dụng mới trên các phương thức. Bên ngoài .modal-dialogchuyển qua các sự kiện với pointer-events: noneđể xử lý nhấp chuột tùy chỉnh (giúp bạn có thể chỉ lắng nghe .modal-backdropbất kỳ nhấp chuột nào), và sau đó đối chiếu với nó cho thực tế .modal-contentvới pointer-events: auto.

Bản tóm tắt

Dưới đây là các mục lớn mà bạn sẽ muốn biết khi chuyển từ v3 sang v4.

Hỗ trợ trình duyệt

  • Không hỗ trợ IE8, IE9 và iOS 6. v4 hiện chỉ có IE10 + và iOS 7+. Đối với các trang web cần một trong hai thứ đó, hãy sử dụng v3.
  • Đã thêm hỗ trợ chính thức cho Trình duyệt và WebView của Android v5.0 Lollipop. Các phiên bản trước của Trình duyệt Android và WebView vẫn chỉ được hỗ trợ không chính thức.

Thay đổi toàn cầu

  • Flexbox được bật theo mặc định. Nói chung, điều này có nghĩa là di chuyển khỏi float và hơn thế nữa trên các thành phần của chúng tôi.
  • Đã chuyển từ Ít sang Sass cho các tệp CSS nguồn của chúng tôi.
  • Được chuyển từ pxsang remlàm đơn vị CSS chính của chúng tôi, mặc dù pixel vẫn được sử dụng cho các truy vấn phương tiện và hành vi lưới vì khung nhìn thiết bị không bị ảnh hưởng bởi kích thước loại.
  • Kích thước phông chữ toàn cầu đã tăng từ 14pxlên 16px.
  • Các lớp lưới đã được cải tiến để thêm tùy chọn thứ năm (giải quyết các thiết bị nhỏ hơn ở 576pxvà bên dưới) và loại bỏ phần -xsinfix khỏi các lớp đó. .col-6.col-sm-4.col-md-3Ví dụ :.
  • Đã thay thế chủ đề tùy chọn riêng biệt bằng các tùy chọn có thể định cấu hình thông qua các biến SCSS (ví dụ $enable-gradients: true:).
  • Xây dựng hệ thống được đại tu để sử dụng một loạt các tập lệnh npm thay vì Grunt. Xem package.jsontất cả các script, hoặc readme dự án của chúng tôi cho các nhu cầu phát triển địa phương.
  • Việc sử dụng Bootstrap không đáp ứng không còn được hỗ trợ.
  • Đã bỏ Tùy biến trực tuyến để có tài liệu thiết lập mở rộng hơn và các bản dựng tùy chỉnh.
  • Đã thêm hàng chục lớp tiện ích mới cho các cặp giá trị-thuộc tính CSS phổ biến và các phím tắt giãn cách lề / đệm.

Hệ thống lưới điện

  • Đã chuyển sang flexbox.
    • Đã thêm hỗ trợ cho flexbox trong các mixin lưới và các lớp được xác định trước.
    • Là một phần của flexbox, bao gồm hỗ trợ cho các lớp căn chỉnh theo chiều dọc và chiều ngang.
  • Đã cập nhật tên lớp lưới và một lớp lưới mới.
    • Đã thêm một smcấp lưới mới bên dưới 768pxđể kiểm soát chi tiết hơn. Bây giờ chúng tôi có xs,, và . Điều này cũng có nghĩa là mọi cấp đã được nâng lên một cấp (vì vậy trong v3 bây giờ là v4).smmdlgxl.col-md-6.col-lg-6
    • xscác lớp lưới đã được sửa đổi để không yêu cầu infix để biểu thị chính xác hơn rằng chúng bắt đầu áp dụng kiểu tại min-width: 0chứ không phải một giá trị pixel đã đặt. Thay vì .col-xs-6, nó là bây giờ .col-6. Tất cả các cấp lưới khác đều yêu cầu infix (ví dụ sm:).
  • Đã cập nhật kích thước lưới, mixin và các biến.
    • Các máng xối lưới hiện có một bản đồ Sass để bạn có thể chỉ định độ rộng cụ thể của máng xối tại mỗi điểm ngắt.
    • Đã cập nhật các mixin lưới để sử dụng một make-col-readymixin chuẩn bị và a make-colđể đặt flexvà max-widthđịnh cỡ cột riêng lẻ.
    • Đã thay đổi các điểm ngắt truy vấn phương tiện hệ thống lưới và chiều rộng vùng chứa để tính đến cấp lưới mới và đảm bảo các cột được chia đều theo 12chiều rộng tối đa của chúng.
    • Các điểm ngắt lưới và độ rộng vùng chứa hiện được xử lý thông qua bản đồ Sass ( $grid-breakpointsvà $container-max-widths) thay vì một số ít các biến riêng biệt. Các biến này thay thế @screen-*hoàn toàn các biến và cho phép bạn tùy chỉnh hoàn toàn các tầng lưới.
    • Truy vấn phương tiện cũng đã thay đổi. Thay vì lặp lại các khai báo truy vấn phương tiện của chúng tôi với cùng một giá trị mỗi lần, chúng tôi hiện có @include media-breakpoint-up/down/only. Bây giờ, thay vì viết @media (min-width: @screen-sm-min) { ... }, bạn có thể viết @include media-breakpoint-up(sm) { ... }.

Các thành phần

  • Các bảng điều khiển, hình thu nhỏ và giếng được giảm bớt cho một thành phần toàn diện mới, thẻ .
  • Đã bỏ phông chữ biểu tượng Glyphicons. Nếu bạn cần các biểu tượng, một số tùy chọn là:
  • Đã bỏ plugin Affix jQuery.
    • Chúng tôi khuyên bạn nên sử dụng position: stickythay thế. Xem mục HTML5 Please để biết chi tiết và các đề xuất polyfill cụ thể. Một gợi ý là sử dụng một @supportsquy tắc để triển khai nó (ví dụ @supports (position: sticky) { ... }:) /
    • Nếu bạn đang sử dụng Affix để áp dụng các kiểu bổ sung, không phải positionkiểu, các polyfills có thể không hỗ trợ trường hợp sử dụng của bạn. Một tùy chọn cho những mục đích sử dụng như vậy là thư viện ScrollPos-Styler của bên thứ ba .
  • Đã bỏ thành phần máy nhắn tin vì nó về cơ bản là các nút được tùy chỉnh nhẹ.
  • Đã cấu trúc lại gần như tất cả các thành phần để sử dụng nhiều bộ chọn lớp không lồng nhau hơn thay vì các bộ chọn con quá cụ thể.

Theo thành phần

Danh sách này nêu bật những thay đổi quan trọng theo thành phần giữa v3.xx và v4.0.0.

Khởi động lại

Tính năng mới đối với Bootstrap 4 là Khởi động lại , một biểu định kiểu mới được xây dựng dựa trên Chuẩn hóa với các kiểu đặt lại có phần cố ý của riêng chúng tôi. Các bộ chọn xuất hiện trong tệp này chỉ sử dụng các phần tử — không có lớp nào ở đây. Điều này tách biệt các kiểu đặt lại của chúng tôi khỏi các kiểu thành phần của chúng tôi để có cách tiếp cận mô-đun hơn. Một số cách đặt lại quan trọng nhất mà điều này bao gồm là sự box-sizing: border-boxthay đổi, chuyển từ emthành remcác đơn vị trên nhiều phần tử, kiểu liên kết và nhiều lần đặt lại phần tử biểu mẫu.

Kiểu chữ

  • Đã chuyển tất cả các .text-tiện ích vào _utilities.scsstệp.
  • Ngoài đường viền .page-header, tất cả các phong cách của nó có thể được áp dụng thông qua các tiện ích.
  • .dl-horizontalđã bị loại bỏ. Thay vào đó, hãy .rowbật <dl>và sử dụng các lớp cột lưới (hoặc các lớp mixin) trên nó <dt>và các lớp <dd>con của nó.
  • Kiểu tùy chỉnh <blockquote>đã được chuyển đến các lớp— .blockquotevà công cụ .blockquote-reversesửa đổi.
  • .list-inlinebây giờ yêu cầu rằng các mục danh sách con của nó phải .list-inline-itemáp dụng lớp mới cho chúng.

Hình ảnh

  • Đã đổi tên .img-responsivethành .img-fluid.
  • Đã đổi tên .img-roundedthành.rounded
  • Đã đổi tên .img-circlethành.rounded-circle

Những cái bàn

  • Gần như tất cả các phiên bản của >bộ chọn đã bị xóa, có nghĩa là các bảng lồng nhau giờ đây sẽ tự động kế thừa các kiểu từ cha mẹ của chúng. Điều này giúp đơn giản hóa đáng kể các bộ chọn và các tùy chỉnh tiềm năng của chúng tôi.
  • Các bảng đáp ứng không còn yêu cầu phần tử bao bọc nữa. Thay vào đó, chỉ cần đặt .table-responsivebên phải vào <table>.
  • Đã đổi tên thành .table-condensedđể .table-smnhất quán.
  • Đã thêm một .table-inversetùy chọn mới.
  • Đã thêm công cụ sửa đổi tiêu đề bảng: .thead-defaultvà .thead-inverse.
  • Đã đổi tên các lớp theo ngữ cảnh để có .table--prefix. Do đó .active, và đến , và . _ _ _.success.warning.danger.info.table-active.table-success.table-warning.table-danger.table-info

Các hình thức

  • Phần tử đã chuyển sẽ đặt lại vào _reboot.scsstệp.
  • Đã đổi tên .control-labelthành .col-form-label.
  • Đã đổi tên .input-lgvà .input-smthành .form-control-lgvà .form-control-sm, tương ứng.
  • Bỏ .form-group-*lớp vì đơn giản. Sử dụng .form-control-*các lớp học thay thế ngay bây giờ.
  • Đã loại bỏ .help-blockvà thay thế nó bằng .form-textvăn bản trợ giúp cấp khối. Đối với văn bản trợ giúp nội tuyến và các tùy chọn linh hoạt khác, hãy sử dụng các lớp tiện ích như .text-muted.
  • Đã đánh rơi .radio-inlinevà .checkbox-inline.
  • Hợp nhất .checkboxvà .radiothành .form-checkvà các .form-check-*lớp khác nhau.
  • Các hình thức ngang đã được đại tu:
    • Bỏ .form-horizontalyêu cầu lớp học.
    • .form-groupkhông còn áp dụng các kiểu từ .rowqua mixin nữa, vì vậy .rowhiện nay được yêu cầu cho bố cục lưới ngang (ví dụ <div class="form-group row">:).
    • Đã thêm .col-form-labellớp mới vào các nhãn căn giữa theo chiều dọc với .form-controls.
    • Đã thêm mới .form-rowcho bố cục biểu mẫu nhỏ gọn với các lớp lưới (hoán đổi của bạn .rowcho một .form-rowvà đi).
  • Đã thêm hỗ trợ biểu mẫu tùy chỉnh (cho hộp kiểm, radio, lựa chọn và đầu vào tệp).
  • Đã thay thế .has-errorvà .has-warningcác .has-successlớp có xác thực biểu mẫu HTML5 thông qua CSS :invalidvà :validlớp giả.
  • Đã đổi tên .form-control-staticthành .form-control-plaintext.

nút

  • Đã đổi tên .btn-defaultthành .btn-secondary.
  • Đã loại bỏ .btn-xshoàn toàn lớp .btn-smnày theo tỷ lệ nhỏ hơn nhiều so với v3.
  • Tính năng nút trạng thái của button.jsplugin jQuery đã bị loại bỏ. Điều này bao gồm các phương pháp $().button(string)và $().button('reset'). Chúng tôi khuyên bạn nên sử dụng một chút JavaScript tùy chỉnh để thay thế, điều này sẽ mang lại lợi ích là hoạt động chính xác theo cách bạn muốn.
    • Lưu ý rằng các tính năng khác của plugin (hộp kiểm nút, radio nút, nút chuyển đổi đơn) đã được giữ lại trong v4.
  • Thay đổi các nút ' [disabled]thành :disabledIE9 + hỗ trợ :disabled. Tuy nhiên , fieldset[disabled]vẫn cần thiết vì các bộ trường bị vô hiệu hóa gốc vẫn còn nhiều lỗi trong IE11 .

Nhóm nút

  • Viết lại thành phần bằng flexbox.
  • Đã xóa .btn-group-justified. Để thay thế, bạn có thể sử dụng <div class="btn-group d-flex" role="group"></div>như một trình bao bọc xung quanh các phần tử .w-100.
  • Đã .btn-group-xsloại bỏ hoàn toàn lớp học đã được xóa .btn-xs.
  • Đã xóa khoảng cách rõ ràng giữa các nhóm nút trong thanh công cụ của nút; sử dụng các tiện ích ký quỹ ngay bây giờ.
  • Tài liệu cải tiến để sử dụng với các thành phần khác.
  • Đã chuyển từ bộ chọn cha thành các lớp số ít cho tất cả các thành phần, bổ ngữ, v.v.
  • Các kiểu thả xuống được đơn giản hóa để không còn giao hàng với các mũi tên hướng lên hoặc hướng xuống được đính kèm trong menu thả xuống.
  • Danh sách thả xuống có thể được tạo bằng <div>s hoặc <ul>s bây giờ.
  • Các kiểu và đánh dấu thả xuống được xây dựng lại để cung cấp hỗ trợ dễ dàng, tích hợp sẵn cho <a>các <button>mục thả xuống dựa trên.
  • Đã đổi tên .dividerthành .dropdown-divider.
  • Các mục thả xuống hiện yêu cầu .dropdown-item.
  • Chuyển đổi thả xuống không còn yêu cầu rõ ràng nữa <span class="caret"></span>; điều này hiện được cung cấp tự động thông qua CSS's ::afteron .dropdown-toggle.

Hệ thống lưới điện

  • Đã thêm một 576pxđiểm ngắt lưới mới dưới dạng sm, nghĩa là bây giờ có tổng số năm cấp ( ,, xsvà ) .smmdlgxl
  • Đã đổi tên các lớp công cụ sửa đổi lưới đáp ứng từ .col-{breakpoint}-{modifier}-{size}thành .{modifier}-{breakpoint}-{size}cho các lớp lưới đơn giản hơn.
  • Đã bỏ các lớp bổ trợ đẩy và kéo cho các lớp hỗ trợ flexbox mới order. Ví dụ: thay vì .col-8.push-4và .col-4.pull-8, bạn sẽ sử dụng .col-8.order-2và .col-4.order-1.
  • Đã thêm các lớp tiện ích flexbox cho hệ thống lưới và các thành phần.

Liệt kê các nhóm

  • Viết lại thành phần bằng flexbox.
  • Được thay thế a.list-group-itembằng một lớp rõ ràng .list-group-item-action, để tạo kiểu liên kết và các phiên bản nút của các mục nhóm danh sách.
  • Đã thêm .list-group-flushlớp để sử dụng với thẻ.
  • Viết lại thành phần bằng flexbox.
  • Khi chuyển sang flexbox, việc căn chỉnh các biểu tượng loại bỏ trong tiêu đề có thể bị hỏng vì chúng tôi không còn sử dụng float nữa. Nội dung nổi có trước, nhưng với flexbox thì không còn như vậy. Cập nhật các biểu tượng loại bỏ của bạn để xuất hiện sau tiêu đề phương thức để sửa chữa.
  • Tùy remotechọn (có thể được sử dụng để tự động tải và đưa nội dung bên ngoài vào một phương thức) và loaded.bs.modalsự kiện tương ứng đã bị xóa. Thay vào đó, chúng tôi khuyên bạn nên sử dụng tạo khuôn mẫu phía máy khách hoặc khung liên kết dữ liệu hoặc tự gọi jQuery.load .
  • Viết lại thành phần bằng flexbox.
  • Đã loại bỏ gần như tất cả các >bộ chọn để tạo kiểu đơn giản hơn thông qua các lớp không lồng nhau.
  • Thay vì các bộ chọn dành riêng cho HTML .nav > li > a, chúng tôi sử dụng các lớp riêng biệt cho .navs, .nav-items và .nav-links. Điều này làm cho HTML của bạn linh hoạt hơn đồng thời tăng khả năng mở rộng.

Thanh điều hướng đã được viết lại hoàn toàn trong flexbox với sự hỗ trợ cải thiện cho việc căn chỉnh, phản hồi và tùy chỉnh.

  • Các hành vi của thanh điều hướng đáp ứng hiện được áp dụng cho .navbarlớp thông qua yêu cầu .navbar-expand-{breakpoint} mà bạn chọn nơi thu gọn thanh điều hướng. Trước đây, đây là một sửa đổi Ít biến đổi và yêu cầu biên dịch lại.
  • .navbar-defaultlà bây giờ .navbar-light, mặc dù .navbar-darkvẫn như cũ. Một trong số này là bắt buộc trên mỗi thanh điều hướng. Tuy nhiên, các lớp này không còn đặt background-colors; thay vào đó về cơ bản chúng chỉ ảnh hưởng color.
  • Navbars hiện yêu cầu một số loại khai báo lý lịch. Chọn từ các tiện ích nền của chúng tôi ( .bg-*) hoặc thiết lập của riêng bạn với các lớp ánh sáng / nghịch đảo ở trên để tùy chỉnh điên cuồng .
  • Với các kiểu flexbox, các thanh điều hướng hiện có thể sử dụng các tiện ích flexbox để có các tùy chọn căn chỉnh dễ dàng.
  • .navbar-togglehiện tại .navbar-togglervà có các kiểu và đánh dấu bên trong khác nhau (không còn ba chữ nữa <span>).
  • Bỏ .navbar-formlớp hoàn toàn. Nó không còn cần thiết nữa; thay vào đó, chỉ cần sử dụng .form-inlinevà áp dụng các tiện ích ký quỹ khi cần thiết.
  • Navbars không còn bao gồm margin-bottomhoặc border-radiustheo mặc định. Sử dụng các tiện ích khi cần thiết.
  • Tất cả các ví dụ có thanh điều hướng đã được cập nhật để bao gồm đánh dấu mới.

Phân trang

  • Viết lại thành phần bằng flexbox.
  • Các lớp rõ ràng ( .page-item, .page-link) hiện được yêu cầu trên các lớp con của .paginations
  • Đã bỏ .pagerhoàn toàn thành phần vì nó chỉ nhiều hơn một chút so với các nút phác thảo tùy chỉnh.
  • Một lớp rõ ràng .breadcrumb-item, bây giờ được yêu cầu trên con cháu của .breadcrumbs

Nhãn và huy hiệu

  • Đã đổi tên thành .labelđể .badgephân biệt khỏi <label>phần tử.
  • Đã bỏ .badgethành phần vì nó gần giống với nhãn. Thay vào đó, hãy sử dụng công .badge-pillcụ sửa đổi cùng với thành phần nhãn để có cái nhìn tròn trịa.
  • Các huy hiệu không còn tự động trôi nổi trong các nhóm danh sách và các thành phần khác. Các lớp tiện ích bây giờ được yêu cầu cho điều đó.
  • .badge-defaultđã bị loại bỏ và .badge-secondaryđược thêm vào để phù hợp với các lớp bổ trợ thành phần được sử dụng ở những nơi khác.

Bảng điều khiển, hình thu nhỏ và giếng

Đã bỏ hoàn toàn cho thành phần thẻ mới.

Bảng điều khiển

  • .panelhiện được xây .carddựng với flexbox.
  • .panel-defaultloại bỏ và không có thay thế.
  • .panel-grouploại bỏ và không có thay thế. .card-groupkhông phải là một sự thay thế, nó là khác nhau.
  • .panel-headingđến.card-header
  • .panel-titleđến .card-title. Tùy thuộc vào giao diện mong muốn, bạn cũng có thể muốn sử dụng các phần tử hoặc lớp đầu đề (ví dụ :) hoặc các phần tử hoặc lớp in đậm (ví dụ <h3>, ) . Lưu ý rằng , trong khi được đặt tên tương tự, tạo ra một cái nhìn khác với ..h3<strong><b>.font-weight-bold.card-title.panel-title
  • .panel-bodyđến.card-body
  • .panel-footerđến.card-footer
  • .panel-primary,, và .panel-successđã bị loại bỏ cho , và các tiện ích được tạo từ bản đồ Sass của chúng tôi..panel-info.panel-warning.panel-danger.bg-.text-.border$theme-colors

Tiến triển

  • .progress-bar-*Đã thay thế các lớp theo ngữ cảnh bằng .bg-*các tiện ích. Ví dụ, class="progress-bar progress-bar-danger"trở thành class="progress-bar bg-danger".
  • Được thay thế .activecho các thanh tiến trình hoạt hình bằng .progress-bar-animated.
  • Đã đại tu toàn bộ thành phần để đơn giản hóa thiết kế và kiểu dáng. Chúng tôi có ít kiểu hơn để bạn ghi đè, các chỉ báo mới và biểu tượng mới.
  • Tất cả CSS đã được bỏ lồng và đổi tên, đảm bảo mỗi lớp đều có tiền tố .carousel-.
    • Đối với các mục băng chuyền .next,, và hiện tại .prev, và ..left.right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
    • .itemcũng là bây giờ .carousel-item.
    • Đối với các điều khiển trước / tiếp theo, .carousel-control.rightvà .carousel-control.leftbây giờ .carousel-control-nextvà .carousel-control-prev, nghĩa là chúng không còn yêu cầu một lớp cơ sở cụ thể nữa.
  • Đã xóa tất cả kiểu đáp ứng, trì hoãn các tiện ích (ví dụ: hiển thị chú thích trên một số chế độ xem nhất định) và các kiểu tùy chỉnh nếu cần.
  • Hình ảnh đã xóa ghi đè cho hình ảnh trong các mục băng chuyền, trì hoãn các tiện ích.
  • Đã chỉnh sửa ví dụ về Băng chuyền để bao gồm đánh dấu và kiểu mới.

Những cái bàn

  • Đã xóa hỗ trợ cho các bảng lồng nhau theo kiểu. Tất cả các kiểu bảng hiện được kế thừa trong v4 cho các bộ chọn đơn giản hơn.
  • Đã thêm biến thể bảng nghịch đảo.

Tiện ích

  • Hiển thị, ẩn và hơn thế nữa:
    • Làm cho các tiện ích hiển thị đáp ứng (ví dụ: .d-nonevà d-{sm,md,lg,xl}-none).
    • Đã bỏ phần lớn các .hidden-*tiện ích cho các tiện ích hiển thị mới . Ví dụ, thay vì .hidden-sm-up, sử dụng .d-sm-none. Đổi tên các .hidden-printtiện ích để sử dụng lược đồ đặt tên tiện ích hiển thị. Thông tin thêm trong phần Tiện ích đáp ứng của trang này.
    • Đã thêm .float-{sm,md,lg,xl}-{left,right,none}các lớp cho phao đáp ứng và bị xóa .pull-leftvà .pull-rightvì chúng thừa đối với .float-leftvà .float-right.
  • Loại hình:
    • Đã thêm các biến thể đáp ứng cho các lớp căn chỉnh văn bản của chúng tôi .text-{sm,md,lg,xl}-{left,center,right}.
  • Căn chỉnh và khoảng cách:
  • Đã cập nhật Clearfix để loại bỏ hỗ trợ cho các phiên bản trình duyệt cũ hơn.

Mixin tiền tố của nhà cung cấp

Các mixin tiền tố của nhà cung cấp Bootstrap 3 , vốn không được dùng trong v3.2.0, đã bị loại bỏ trong Bootstrap 4. Vì chúng tôi sử dụng Autoprefixer nên chúng không còn cần thiết nữa.

Đã xóa các mixin sau : ,,,,,,,,,,, animation_ animation-delay_ animation-direction_ animation-duration_ animation-fill-mode_ animation-iteration-count_ animation-name_ animation-timing-function_ backface-visibility_ box-sizing_ content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_transition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Tài liệu

Tài liệu của chúng tôi cũng nhận được bản nâng cấp trên toàn bộ diện mạo. Đây là mức thấp nhất:

  • Chúng tôi vẫn đang sử dụng Jekyll, nhưng chúng tôi có các plugin kết hợp:
    • bugify.rbđược sử dụng để liệt kê một cách hiệu quả các mục trên trang lỗi trình duyệt của chúng tôi .
    • example.rblà một nhánh tùy chỉnh của highlight.rbplugin mặc định, cho phép xử lý mã ví dụ dễ dàng hơn.
    • callout.rblà một nhánh tùy chỉnh tương tự như vậy, nhưng được thiết kế cho chú thích tài liệu đặc biệt của chúng tôi.
    • markdown-block.rbđược sử dụng để hiển thị các đoạn mã Markdown trong các phần tử HTML như bảng.
    • jekyll-toc được sử dụng để tạo mục lục của chúng tôi.
  • Tất cả nội dung tài liệu đã được viết lại bằng Markdown (thay vì HTML) để chỉnh sửa dễ dàng hơn.
  • Các trang đã được tổ chức lại để có nội dung đơn giản hơn và hệ thống phân cấp dễ tiếp cận hơn.
  • Chúng tôi đã chuyển từ CSS thông thường sang SCSS để tận dụng tối đa các biến, mixin và hơn thế nữa của Bootstrap.

Các tiện ích đáp ứng

Tất cả các @screen-biến đã bị xóa trong v4.0.0. Thay vào đó, hãy sử dụng các mixin media-breakpoint-up(), media-breakpoint-down()hoặc media-breakpoint-only()Sass hoặc $grid-breakpointsbản đồ Sass.

Các lớp tiện ích đáp ứng của chúng tôi phần lớn đã bị loại bỏ để có lợi cho các displaytiện ích rõ ràng.

  • Các lớp .hiddenvà đã bị xóa vì chúng xung đột với các phương thức và .showcủa jQuery . Thay vào đó, hãy thử chuyển đổi thuộc tính hoặc sử dụng các kiểu nội tuyến như và .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Tất cả .hidden-các lớp đã bị xóa, hãy lưu cho các tiện ích in đã được đổi tên.
    • Đã xóa khỏi v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Đã xóa khỏi v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Tiện ích in không còn bắt đầu bằng .hidden-hoặc .visible-, mà bằng .d-print-.
    • Tên cũ : .visible-print-block,,.visible-print-inline.visible-print-inline-block.hidden-print
    • Các lớp mới : .d-print-block,,.d-print-inline.d-print-inline-block.d-print-none

Thay vì sử dụng .visible-*các lớp rõ ràng, bạn làm cho một phần tử hiển thị bằng cách không ẩn nó ở kích thước màn hình đó. Bạn có thể kết hợp một .d-*-nonelớp với một .d-*-blocklớp để chỉ hiển thị một phần tử trên một khoảng kích thước màn hình nhất định (ví dụ: .d-none.d-md-block.d-xl-nonechỉ hiển thị phần tử trên các thiết bị vừa và lớn).

Lưu ý rằng những thay đổi đối với các điểm ngắt của lưới trong v4 có nghĩa là bạn sẽ cần phải lớn hơn một điểm ngắt để đạt được kết quả tương tự. Các lớp tiện ích đáp ứng mới không cố gắng đáp ứng các trường hợp ít phổ biến hơn trong đó khả năng hiển thị của phần tử không thể được thể hiện dưới dạng một phạm vi kích thước khung nhìn liền kề; thay vào đó, bạn sẽ cần sử dụng CSS tùy chỉnh trong những trường hợp như vậy.