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, theo sau 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ừ Beta 3 sang bản phát hành V4.0 ổn định của chúng tôi, không có thay đổi nào, nhưng có một số thay đổi đáng chú ý.
In
Đã sửa lỗi các tiện ích in bị hỏng. Trước đây, sử dụng lớp
.d-print-*
sẽ bất ngờ ghi đè bất kỳ lớp.d-*
nào khác. Bây giờ, chúng phù hợ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ị in có sẵn để phù hợp với các tiện ích khác. Beta 3 trở lên chỉ có
block
,inline-block
,inline
vànone
. Ổn định V4 đã thêmflex
,inline-flex
,table
,.d-*
0 và.d-*
1.Đã sửa lỗi kết xuất xem trước in trên các trình duyệt với các kiểu in mới chỉ định
.d-*
2.d-*
3.
Beta 3 thay đổi
Mặc dù Beta 2 đã thấy phần lớn các thay đổi phá vỡ 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 được áp dụng nếu bạn đang cập nhật Beta 3 từ Beta 2 hoặc bất kỳ phiên bản Bootstrap cũ nào.
Điều khoản khác
- Đã loại bỏ biến
.d-*
4 chưa 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 các tệp nguồn và dist của chúng tôi; Nếu bạn dựa vào chúng và đang chạy tập lệnh của chúng tôi thông qua thư mục
.d-*
5, 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
.d-*
6 với anh chị em.d-*
7 và.d-*
8] và các kiểu bố cục tương tự [xếp chồng mặc định, nội tuyến với lớp sửa đổi]. Đ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 đầu vào, đơn giản hóa hỗ trợ cho thuộc tính.d-*
9 [trước đây yêu cầu lớp cha] và hỗ trợ tốt hơn 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 ____20 trên các hộp kiểm và radio tùy chỉnh. Trước đây, phần tử
@media print
1 đã bị loại bỏ có màu nền, gradient và svg. Tùy chỉnh độ dốc nền có nghĩa là thay thế tất cả những thứ đó mỗi khi bạn cần thay đổi chỉ một. Bây giờ, chúng tôi có@media print
2 để điền và gradient và@media print
3 xử lý biểu tượng.Để thực hiện kiểm tra tùy chỉnh nội tuyến, thêm
@media print
4.Bộ chọn cập nhật cho các nhóm nút dựa trên đầu vào. Thay vì
@media print
5 cho phong cách và hành vi, chúng tôi sử dụng thuộc tính@media print
6 chỉ dành cho các hành vi của JS và dựa vào một lớp@media print
7 mới để tạo kiểu.Đã loại bỏ
@media print
8 có lợi cho một@media print
9 được cải thiện một chút. Bằng cách nàyblock
0 vàblock
1 có thể được sử dụng trên các yếu tốblock
2 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 biến SASS
block
3 của họ. Nó không còn là một bản đồ sass lồng nhau và bây giờ chỉ cung cấp năng lượng cho một chuỗi, nútblock
4 vì đó bây giờ là yếu tố giả duy nhất được tạo ra từ sass của chúng tôi. Văn bảnblock
5 bây giờ đến từblock
6.
Nhóm đầu vào
Các addon nhóm đầu vào hiện là cụ thể cho vị trí của chúng so với đầu vào. Chúng tôi đã bỏ
block
7 vàblock
8 cho hai lớp mới,block
9 vàinline-block
0. Bạn phải sử dụng rõ ràng một phần phụ hoặc một dự bị ngay bây giờ, đơn giản hóa nhiều CSS của chúng tôi. Trong một phần phụ hoặc dự bị, đặt các nút của bạn vì chúng sẽ tồn tại ở bất kỳ nơi nào khác, nhưng bao bọc văn bản tronginline-block
1.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 nhận một đầu vào cho mỗi nhóm].
Các lớp kích thước phải nằm trên phụ huynh
inline-block
2 chứ không phải các yếu tố mẫu riêng lẻ.
Beta 2 thay đổi
Trong khi ở Beta, chúng tôi mong muốn không có thay đổi phá vỡ. Tuy nhiên, mọi thứ don luôn luôn đi theo kế hoạch. Dưới đây là những thay đổi phá vỡ để ghi nhớ khi chuyển từ beta 1 sang beta 2.
Phá vỡ
- Đã xóa biến
inline-block
3 và việc sử dụng của nó trêninline-block
4. Chúng tôi sử dụng hàm tương phản màu để chọninline-block
5 dựa trêninline-block
6, do đó biến là không cần thiết. - Đổi tên chức năng
inline-block
7 thànhinline-block
8 để tránh phá vỡ xung đột với bộ lọcinline-block
9 gốc CSS. - Được đổi tên thành
inline
0,inline
1 vàinline
2 thànhinline
3 vàinline
4, phù hợp với các bảng màu của chúng tôi được sử dụng ở nơi khác. - Các bảng đáp ứng bây giờ tạo các lớp cho mỗi điểm dừng lưới. Điều này phá vỡ từ Beta 1 ở chỗ
inline
5 mà bạn đã sử dụng giống nhưinline
6. Bây giờ bạn có thể sử dụnginline
5 hoặcinline
8 khi cần thiết. - Hỗ trợ Bower bị rơi với tư cách là người quản lý gói đã không được dùng cho các lựa chọn thay thế [ví dụ: sợi hoặc NPM]. Xem Bower/Bower#2298 để biết 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 người hỗ trợ Bootstrap cộng với V3.x có một số bản sửa lỗi bảo mật.
- Đã loại bỏ lớp
inline
9 chưa sử dụng. Nếu bạn đã sử dụng lớp này, thì đó là bản sao của lớp@media print
9 tập trung theo chiều dọc.d-*
8 với đầu vào liên kết của nó trong bố cục hình thức ngang. - Đã thay đổi
none
2 từ một hỗn hợp bao gồm thuộc tínhinline-block
5 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ìnone
4, bạn đã viếtnone
5.
Điểm nổi bật
- Giới thiệu cách sử dụng
none
6 mới trên phương thức.none
7 bên ngoài truyền qua các sự kiện vớinone
8 để xử lý nhấp chuột tùy chỉnh [giúp chỉ có thể nghe trênnone
9 cho bất kỳ nhấp chuột nào], sau đó chống lại nó choflex
0 thực tế vớiflex
1.
Bản tóm tắt
Dưới đây là các mặt hàng vé lớn mà bạn sẽ muốn biết khi chuyển từ V3 sang V4.
Hỗ trợ trình duyệt
- Bỏ IE8, IE9 và iOS 6 hỗ trợ. V4 bây giờ chỉ là IE10+ và iOS 7+. Đối với các trang web cần một trong hai, 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à một sự di chuyển ra khỏi phao và nhiều hơn nữa trên các thành phần của chúng tôi. In general this means a move away from floats and more across our components.
- Chuyển từ ít hơn sang SASS cho các tệp CSS nguồn của chúng tôi.
- Chuyển từ
flex
2 sangflex
3 làm đơn vị CSS chính của chúng tôi, mặc dù các pixel vẫn được sử dụng cho các truy vấn phương tiện và hành vi lưới vì chế độ xem 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ừ
flex
4 lênflex
5. - Các tầng lưới được tân trang lại để thêm tùy chọn thứ năm [giải quyết các thiết bị nhỏ hơn ở
flex
6 trở xuống] và loại bỏflex
7 Infix khỏi các lớp đó. Ví dụ:flex
8. - Đã 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ụ:
flex
9]. - 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ì càu nhàu. Xem
inline-flex
0 cho tất cả các tập lệnh hoặc dự án của chúng tôi ReadMe cho nhu cầu phát triển địa phương. - Việc sử dụng không đáp ứng của bootstrap không còn được hỗ trợ.
- Bỏ các tùy chỉnh trực tuyến để ủng hộ tài liệu thiết lập rộng rãi 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ị tài sản CSS phổ biến và các phím tắt khoảng cách lề/phần đệm.
Hệ thống lưới điện
- Chuyển đến Flexbox.
- Đã thêm hỗ trợ cho Flexbox trong các lớp bản phối 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 dọc và ngang.
- Cập nhật tên lớp lưới và một tầng lưới mới.
- Đã thêm một tầng lưới
inline-flex
1 mới bên dướiinline-flex
2 để kiểm soát hạt hơn. Bây giờ chúng tôi cóinline-flex
3,inline-flex
1,inline-flex
5,inline-flex
6 vàinline-flex
7. Điều này cũng có nghĩa là mọi tầng đã được tăng lên một cấp độ [vì vậyinline-flex
8 trong V3 hiện làinline-flex
9 trong V4]. inline-flex
3 Các lớp lưới đã được sửa đổi để không yêu cầu Infix thể hiện chính xác hơn rằng chúng bắt đầu áp dụng các kiểu ởtable
1 và không phải là giá trị pixel được đặt. Thay vìtable
2, nó bây giờtable
3. Tất cả các tầng lưới khác yêu cầu infix [ví dụ:inline-flex
1].
- Đã thêm một tầng lưới
- Cập nhật kích thước lưới, mixin và biến.
- Món máng ăn hiện có một bản đồ SASS để bạn có thể chỉ định độ rộng máng xối cụ thể tại mỗi điểm dừng.
- Cập nhật các hỗn hợp lưới để sử dụng hỗn hợp chuẩn bị
table
5 vàtable
6 để đặtflex
vàtable
8 cho kích thước cột riêng lẻ. - Thay đổi các điểm dừng truy vấn phương tiện truyền thông hệ thống lưới và chiều rộng của container để tính đến tầng lưới mới và đảm bảo các cột chia hết cho
table
9 ở chiều rộng tối đa của chúng. - Các điểm dừng lưới và chiều rộng của container hiện được xử lý thông qua các bản đồ SASS [
.d-*
00 và.d-*
01] thay vì một số các biến riêng biệt. Chúng thay thế hoàn toàn các biến ____102 và cho phép bạn tùy chỉnh đầy đủ các tầng lưới. - Truy vấn truyền thông cũng đã thay đổi. Thay vì lặp lại các khai báo truy vấn truyền thông của chúng tôi với cùng một giá trị mỗi lần, giờ đây chúng tôi có
.d-*
03. Bây giờ, thay vì viết.d-*
04, bạn có thể viết.d-*
05.
Các thành phần
- Các tấm bị bỏ, hình thu nhỏ và giếng cho một thành phần mới bao gồm các thẻ, thẻ. for a new all-encompassing component, cards.
- Thả phông chữ biểu tượng glyphicons. Nếu bạn cần biểu tượng, một số tùy chọn là: If you need icons, some options are:
- Phiên bản Glyphicons ngược dòng
- Octicons
- Phông chữ tuyệt vời
- Xem trang mở rộng để biết danh sách các lựa chọn thay thế. Có đề xuất bổ sung? Vui lòng mở một vấn đề hoặc PR.
- Bỏ plugin JQuery.
- Chúng tôi khuyên bạn nên sử dụng
.d-*
06 thay thế. Xem HTML5 Vui lòng nhập để biết chi tiết và các khuyến nghị polyfill cụ thể. Một gợi ý là sử dụng quy tắc.d-*
07 để thực hiện nó [ví dụ: ________ 108]/ - Nếu bạn đang sử dụng phụ kiện để áp dụng các kiểu bổ sung, không phải là 109, 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 việc sử dụng như vậy là thư viện scrollpos-styler của bên thứ ba.
- Chúng tôi khuyên bạn nên sử dụng
- Bỏ các thành phần máy nhắn tin vì nó về cơ bản là các nút hơi tùy chỉnh. as it was essentially slightly customized buttons.
- Được tái cấu trúc gần như tất cả các thành phần để sử dụng nhiều bộ chọn lớp không được lồng thay vì các bộ chọn trẻ em quá cụ thể. to use more un-nested class selectors instead of over-specific children selectors.
Bởi thành phần
Danh sách này nêu bật các thay đổi chính theo thành phần giữa V3.x.x và V4.0.0.
Khởi động lại
Mới đến Bootstrap 4 là phần khởi động lại, một biểu định kiểu mới được xây dựng trên Bình thường hóa với các kiểu thiết lập lại có phần có ý kiến của chúng ta. Các bộ chọn xuất hiện trong tệp này chỉ sử dụng các yếu tố, không có lớp nào ở đây. Điều này cô lập các kiểu thiết lập lại của chúng tôi từ các kiểu thành phần của chúng tôi cho một cách tiếp cận mô -đun hơn. Một số thiết lập lại quan trọng nhất bao gồm là thay đổi .d-*
10, chuyển từ .d-*
11 sang flex
3 đơn vị trên nhiều yếu tố, kiểu liên kết và nhiều thiết lập lại phần tử.
Kiểu chữ
- Đã chuyển tất cả các tiện ích
.d-*
13 sang tệp.d-*
14. - Rơi
.d-*
15, ngoài biên giới, tất cả các kiểu của nó có thể được áp dụng thông qua các tiện ích. .d-*
16 đã bị loại bỏ. Thay vào đó, hãy sử dụng.d-*
17 trên.d-*
18 và sử dụng các lớp cột lưới [hoặc mixin] trên trẻ em.d-*
19 và.d-*
20.- Kiểu dáng tùy chỉnh ____121 đã được chuyển sang các lớp học.
.d-*
24 hiện yêu cầu các mục trong danh sách trẻ em của nó có lớp.d-*
25 mới được áp dụng cho chúng.
Hình ảnh
- Đổi tên thành
.d-*
26 thành.d-*
27. - Đổi tên thành
.d-*
28 thành.d-*
29 - Đổi tên thành
.d-*
30 thành.d-*
31
Những cái bàn
- Gần như tất cả các trường hợp của bộ chọn
.d-*
32 đã 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 họ. Điều này đơn giản hóa rất nhiều bộ chọn và tùy chỉnh tiềm năng của chúng tôi. - Bảng đáp ứng không còn yêu cầu một yếu tố gói. Thay vào đó, chỉ cần đặt
inline
5 ngay trên.d-*
34. - Đổi tên thành
.d-*
35 thành.d-*
36 cho tính nhất quán. - Đã thêm tùy chọn
inline
0 mới. - Đã thêm các sửa đổi tiêu đề bảng:
inline
2 vàinline
1. - Đổi tên các lớp theo ngữ cảnh để có ____ 140-prefix. Do đó
.d-*
41,.d-*
42,.d-*
43,.d-*
44 và.d-*
45 đến.d-*
46,.d-*
47,.d-*
48,.d-*
49 và.d-*
50.
Các hình thức
- Di chuyển phần tử đặt lại vào tệp
.d-*
51. - Đổi tên thành
.d-*
52 thành@media print
9. - Đổi tên thành
.d-*
54 và.d-*
55 thành.d-*
56 và.d-*
57, tương ứng. - Đã giảm
.d-*
58 các lớp vì sự đơn giản. Sử dụng các lớp.d-*
59 thay thế ngay bây giờ. - Đã bỏ
.d-*
60 và thay thế nó bằng.d-*
61 cho vă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ư.d-*
62. - Rơi
.d-*
63 và.d-*
64. - Hợp nhất
.d-*
65 và.d-*
66 thành.d-*
67 và các lớp.d-*
68 khác nhau. - Các hình thức ngang được đại tu:
- Bỏ yêu cầu lớp
.d-*
69. .d-*
70 không còn áp dụng các kiểu từ.d-*
17 qua mixin, vì vậy.d-*
17 hiện được yêu cầu cho bố cục lưới ngang [ví dụ:.d-*
73].- Đã thêm lớp
@media print
9 mới vào các nhãn trung tâm theo chiều dọc với.d-*
75s. - Đã thêm
.d-*
76 mới cho bố cục biểu mẫu nhỏ gọn với các lớp lưới [trao đổi.d-*
17 của bạn cho.d-*
76 và GO].
- Bỏ yêu cầu lớp
- Đã thêm hỗ trợ biểu mẫu tùy chỉnh [cho các hộp kiểm, radio, chọn và đầu vào tệp].
- Đã thay thế các lớp
.d-*
79,.d-*
80 và.d-*
81 với xác thực biểu mẫu HTML5 thông qua CSS tựa ____ ____182 và.d-*
83 lớp giả. - Đổi tên thành
.d-*
84 thành.d-*
85.
nút
- Đổi tên thành
.d-*
86 thành.d-*
87. - Thả lớp
.d-*
88 hoàn toàn vì.d-*
89 tương ứng nhỏ hơn nhiều so với V3. - Tính năng nút trạng thái của plugin jQuery
.d-*
90 đã bị loại bỏ. Điều này bao gồm các phương thức.d-*
91 và.d-*
92. Thay vào đó, chúng tôi khuyên bạn nên sử dụng một chút JavaScript tùy chỉnh, điều này sẽ có lợi ích là hành xử 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 một lần quay] đã được giữ lại trong V4.
- Thay đổi nút
.d-*
93 thành.d-*
94 khi IE9+ hỗ trợ.d-*
94. Tuy nhiên,.d-*
96 vẫn còn cần thiết vì các trường khuyết tật gốc vẫn còn lỗi trong IE11.
Nhóm nút
- Viết lại thành phần với FlexBox.
- Đã loại bỏ
.d-*
97. Để thay thế, bạn có thể sử dụng.d-*
98 như một trình bao bọc xung quanh các yếu tố với.d-*
99. - Đã bỏ lớp
@media print
00 hoàn toàn được loại bỏ.d-*
88. - Loại bỏ khoảng cách rõ ràng giữa các nhóm nút trong các thanh công cụ nút; Sử dụng các tiện ích ký quỹ ngay bây giờ.
- Cải thiện tài liệu để sử dụng với các thành phần khác.
Thả xuống
- Chuyển từ bộ chọn cha mẹ sang các lớp số ít cho tất cả các thành phần, bộ sửa đổi, v.v.
- Các kiểu thả xuống đơn giản để không còn vận chuyển với các mũi tên hướng lên hoặc hướng xuống được gắn vào menu thả xuống.
- Các thả xuống có thể được xây dựng với
.d-*
6S hoặc@media print
03S ngay bây giờ. - Các kiểu thả xuống được xây dựng lại và đánh dấu để cung cấp hỗ trợ dễ dàng, tích hợp cho các mục thả xuống dựa trên
@media print
04 và@media print
05. - Đổi tên thành
@media print
06 thành@media print
07. - Các mặt hàng thả xuống bây giờ yêu cầu
@media print
08. - Thả xuống không còn yêu cầu
@media print
09 rõ ràng; Điều này hiện được cung cấp tự động thông qua CSS từ@media print
10 trên@media print
11.
Hệ thống lưới điện
- Đã thêm một điểm dừng lưới
flex
6 mới làinline-flex
1, có nghĩa là hiện có năm tầng tổng cộng [inline-flex
3,inline-flex
1,inline-flex
5,inline-flex
6 vàinline-flex
7]. - Đổi tên các lớp sửa đổi lưới phản hồi từ
@media print
19 thành@media print
20 cho các lớp lưới đơn giản hơn. - Các lớp sửa đổi đẩy và kéo cho các lớp
@media print
21 được hỗ trợ Flexbox mới. Ví dụ: thay vì@media print
22 và@media print
23, bạn đã sử dụng@media print
24 và@media print
25. - Đã thêm các lớp tiện ích Flexbox cho hệ thống lưới và các thành phần.
Danh sách các nhóm
- Viết lại thành phần với FlexBox.
- Đã thay thế
@media print
26 bằng một lớp rõ ràng,@media print
27, cho các phiên bản liên kết kiểu dáng và nút của các mục nhóm danh sách. - Đã thêm lớp
@media print
28 để sử dụng với thẻ.
Phương thức
- Viết lại thành phần với FlexBox.
- Đã thay thế
@media print
26 bằng một lớp rõ ràng,@media print
27, cho các phiên bản liên kết kiểu dáng và nút của các mục nhóm danh sách. - Đã thêm lớp
@media print
28 để sử dụng với thẻ.
Phương thức
- Viết lại thành phần với FlexBox.
- Đã thay thế
@media print
26 bằng một lớp rõ ràng,@media print
27, cho các phiên bản liên kết kiểu dáng và nút của các mục nhóm danh sách. - Đã thêm lớp
@media print
28 để sử dụng với thẻ.
Phương thức
Được chuyển sang Flexbox, sự liên kết của các biểu tượng DISMISS trong tiêu đề có khả năng bị phá vỡ vì chúng tôi không còn sử dụng phao. Nội dung nổi xuất hiện trước, nhưng với Flexbox mà không còn xảy ra. Cập nhật các biểu tượng bãi bỏ của bạn đến sau các tiêu đề phương thức để sửa chữa.
- Tùy chọn
@media print
29 [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à sự kiện@media print
30 tương ứng đã bị xóa. Thay vào đó, chúng tôi khuyên bạn nên sử dụng 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.required@media print
37 where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. - NAVSOne of these is required on each navbar. However, these classes no longer set
inline-block
6s; instead they essentially only affectinline-block
5. - Đã giảm gần như tất cả các bộ chọn
.d-*
32 để tạo kiểu đơn giản hơn thông qua các lớp không được lồng. - Thay vì các bộ chọn dành riêng cho HTML như
@media print
32, chúng tôi sử dụng các lớp riêng biệt cho@media print
33S,@media print
34S và@media print
35S. Điều này làm cho HTML của bạn linh hoạt hơn trong khi mang lại khả năng mở rộng tăng lên. - Thanh điều khiển
- Thanh điều khiển đã được viết lại hoàn toàn trong Flexbox với sự hỗ trợ được cải thiện cho sự liên kết, đáp ứng và tùy chỉnh.
- Các hành vi của Navbar đáp ứng hiện được áp dụng cho lớp
@media print
36 thông qua@media print
37 cần thiết nơi bạn chọn nơi để thu gọn thanh hải quân. Trước đây đây là một sửa đổi ít thay đổi và yêu cầu biên dịch lại. @media print
38 hiện là@media print
39, mặc dù@media print
40 vẫn giữ nguyên. Một trong số này được yêu cầu trên mỗi thanh hải quân. Tuy nhiên, các lớp này không còn đặtinline-block
6s; Thay vào đó, về cơ bản chúng chỉ ảnh hưởng đếninline-block
5.
- Viết lại thành phần với FlexBox.
- Đã thay thế
@media print
26 bằng một lớp rõ ràng,@media print
27, cho các phiên bản liên kết kiểu dáng và nút của các mục nhóm danh sách. - Đã thêm lớp
@media print
28 để sử dụng với thẻ.
- Phương thức
Được chuyển sang Flexbox, sự liên kết của các biểu tượng DISMISS trong tiêu đề có khả năng bị phá vỡ vì chúng tôi không còn sử dụng phao. Nội dung nổi xuất hiện trước, nhưng với Flexbox mà không còn xảy ra. Cập nhật các biểu tượng bãi bỏ của bạn đến sau các tiêu đề phương thức để sửa chữa.
- Tùy chọn
@media print
29 [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à sự kiện@media print
30 tương ứng đã bị xóa. Thay vào đó, chúng tôi khuyên bạn nên sử dụng 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. - NAVS
- Đã giảm gần như tất cả các bộ chọn
.d-*
32 để tạo kiểu đơn giản hơn thông qua các lớp không được lồng. - Thay vì các bộ chọn dành riêng cho HTML như
@media print
32, chúng tôi sử dụng các lớp riêng biệt cho@media print
33S,@media print
34S và@media print
35S. Điều này làm cho HTML của bạn linh hoạt hơn trong khi mang lại khả năng mở rộng tăng lên.
Thanh điều khiển
Thanh điều khiển đã được viết lại hoàn toàn trong Flexbox với sự hỗ trợ được cải thiện cho sự liên kết, đáp ứng và tùy chỉnh.
Các hành vi của Navbar đáp ứng hiện được áp dụng cho lớp @media print
36 thông qua @media print
37 cần thiết nơi bạn chọn nơi để thu gọn thanh hải quân. Trước đây đây là một sửa đổi ít thay đổi và yêu cầu biên dịch lại.
@media print
38 hiện là@media print
39, mặc dù@media print
40 vẫn giữ nguyên. Một trong số này được yêu cầu trên mỗi thanh hải quân. Tuy nhiên, các lớp này không còn đặtinline-block
6s; Thay vào đó, về cơ bản chúng chỉ ảnh hưởng đếninline-block
5.- Navbars bây giờ yêu cầu một tuyên bố nền của một số loại. Chọn từ các tiện ích nền của chúng tôi [
@media print
43] hoặc đặt của riêng bạn với các lớp ánh sáng/nghịch đảo ở trên để tùy chỉnh MAD. - Đưa ra các kiểu Flexbox, Navbars hiện có thể sử dụng các tiện ích Flexbox cho các tùy chọn căn chỉnh dễ dàng.
@media print
44 hiện là@media print
45 và có các kiểu khác nhau và đánh dấu bên trong [không còn ba@media print
46s].- Thả hoàn toàn lớp ____247. Nó không còn cần thiết nữa; Thay vào đó, chỉ cần sử dụng
@media print
48 và áp dụng các tiện ích ký quỹ khi cần thiết. @media print
80 đến@media print
81@media print
82 đến@media print
83@media print
84,@media print
85,@media print
86,@media print
87 và@media print
88 đã được giảm cho@media print
89,.d-*
13 và@media print
91 Các tiện ích được tạo ra từ bản đồ SASS@media print
92 của chúng tôi.
Tiến triển
- Thay thế các lớp
@media print
93 theo ngữ cảnh bằng các tiện ích@media print
43. Ví dụ,@media print
95 trở thành@media print
96. - Đã thay thế
.d-*
41 cho các thanh tiến trình hoạt hình bằng@media print
98.
Băng chuyền
- Đạ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ỉ số mới và biểu tượng mới.
- Tất cả các CSS đã không được lồng và đổi tên, đảm bảo mỗi lớp được tiền tố với
@media print
99.- Đối với các mục Carousel,
block
00,block
01,block
02 vàblock
03 hiện làblock
04,block
05,block
06 vàblock
07. block
08 hiện cũng làblock
09.- Đối với các điều khiển trước/tiếp theo,
block
10 vàblock
11 hiện làblock
12 vàblock
13, có nghĩa là chúng không còn yêu cầu một lớp cơ sở cụ thể.
- Đối với các mục Carousel,
- Đã loại bỏ tất cả các kiểu dáng đáp ứng, trì hoãn các tiện ích [ví dụ: hiển thị chú thích trên các chế độ xem nhất định] và các kiểu tùy chỉnh khi cần thiết.
- Đã xóa hình ảnh ghi đè cho hình ảnh trong các mục băng chuyền, trì hoãn các tiện ích.
- Tinh chỉnh ví dụ về băng chuyền để bao gồm các kiểu và kiểu mới.
Những cái bàn
- Đã loại bỏ 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.
- Được thêm biến thể bảng nghịch đảo.
Tiện ích
- Hiển thị, ẩn, và nhiều hơn nữa:
- Đã thực hiện các tiện ích hiển thị đáp ứng [ví dụ:
block
14 vàblock
15]. - Đã bỏ phần lớn các tiện ích
block
16 cho các tiện ích hiển thị mới. Ví dụ: thay vìblock
17, sử dụngblock
18. Được đổi tên thành các tiện íchblock
19 để sử dụng sơ đồ đặt tên tiện ích hiển thị. Thông tin thêm theo phần Tiện ích đáp ứng của trang này. - Đã thêm các lớp
block
20 cho phao phản hồi và loại bỏblock
21 vàblock
22 vì chúng dự phòng thànhblock
23 vàblock
24.
- Đã thực hiện các tiện ích hiển thị đáp ứng [ví dụ:
- Type:
- Đã thêm các biến thể đáp ứng vào các lớp căn chỉnh văn bản của chúng tôi
block
25.
- Đã thêm các biến thể đáp ứng vào các lớp căn chỉnh văn bản của chúng tôi
- Căn chỉnh và khoảng cách:
- Đã thêm các tiện ích chuyển đổi và phần đệm đáp ứng mới cho tất cả các mặt, cộng với các tốc ký dọc và ngang.
- Đã thêm thuyền của các tiện ích flexbox.
- Đã giảm
block
26 cho lớpblock
27 mới.
- ClearFix được cập nhật để 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 hỗn hợp tiền tố nhà cung cấp Bootstrap 3, được không dùng nữa trong V3.2.0, đã bị loại bỏ trong Bootstrap 4. Vì chúng tôi sử dụng Autoprefixer, chúng không còn cần thiết nữa.
Removed the following mixins: block
28, block
29, block
30, block
31, block
32, block
33, block
34, block
35, block
36, block
37, block
38, block
39, block
40, block
41, block
42, block
43, block
44, block
45, block
46, block
47, block
48, block
49, block
50 , block
51, block
52, block
53, block
54, block
55, block
56, block
57, block
58
Tài liệu
Tài liệu của chúng tôi đã nhận được một bản nâng cấp trên bảng là tốt. Ở đây, thấp xuống:
- Chúng tôi vẫn sử dụng Jekyll, nhưng chúng tôi có các plugin trong hỗn hợp:
block
59 được sử dụng để liệt kê hiệu quả các mục trên trang Trình duyệt của chúng tôi.block
60 là một ngã ba tùy chỉnh của pluginblock
61 mặc định, cho phép xử lý mã ví dụ dễ dàng hơn.block
62 là một ngã ba tùy chỉnh tương tự, nhưng được thiết kế cho các chú thích tài liệu đặc biệt của chúng tôi.block
63 được sử dụng để hiển thị các đoạn đánh dấu trong các phần tử HTML như bảng.- Jekyll-toc được sử dụng để tạo bảng nội dung của chúng tôi.
- Tất cả nội dung tài liệu đã được viết lại trong Markdown [thay vì HTML] để chỉnh sửa dễ dàng hơn.
- Các trang đã được tổ chức lại cho 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 Bootstrap, mixin, v.v.
Tiện ích đáp ứng
Tất cả các biến block
64 đã được xóa trong v4.0.0. Sử dụng block
65, block
66 hoặc block
67 MIXIN SASS hoặc bản đồ SASS .d-*
00 thay thế.
Các lớp tiện ích đáp ứng của chúng tôi phần lớn đã bị xóa để có lợi cho các tiện ích block
69 rõ ràng.
- Các lớp
block
70 vàblock
71 đã bị xóa vì chúng mâu thuẫn với các phương pháp JQuery tựablock
72 vàblock
73. Thay vào đó, hãy thử chuyển đổi thuộc tínhblock
74 hoặc sử dụng các kiểu nội tuyến nhưblock
75 vàblock
76. - Tất cả các lớp
block
77 đã bị xóa, tiết kiệm cho các tiện ích in đã được đổi tên.- Bị loại khỏi V3:
block
78block
79block
80block
81block
82block
83block
84block
85 ____386 - Bị xóa khỏi V4 bảng chữ cái:
block
94block
95block
17block
97block
98block
99inline-block
00inline-block
01
- Bị loại khỏi V3:
- Các tiện ích in không còn bắt đầu với
block
77 hoặcinline-block
03, nhưng vớiinline-block
04.- Tên cũ:
inline-block
05,inline-block
06,inline-block
07,block
19 - Các lớp mới:
inline-block
09,inline-block
10,inline-block
11,inline-block
12
- Tên cũ:
Thay vì sử dụng các lớp inline-block
13 rõ ràng, bạn có thể hiển thị một phần tử bằng cách không giấu nó ở kích thước màn hình đó. Bạn có thể kết hợp một lớp inline-block
14 với một lớp inline-block
15 để hiển thị một phần tử chỉ trên một khoảng thời gian nhất định có kích thước màn hình [ví dụ: inline-block
16 chỉ hiển thị phần tử trên các thiết bị trung bình và lớn].
Lưu ý rằng các thay đổi đối với các điểm dừng lưới trong V4 có nghĩa là bạn sẽ cần phải đi một điểm dừng lớn hơn để đạt được kết quả tương tự. Các lớp tiện ích đáp ứng mới don don cố gắng phù hợp với các trường hợp ít phổ biến hơn trong đó khả năng hiển thị của một yếu tố có thể được thể hiện dưới dạng một phạm vi kích thước quan điểm duy nhất; 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.