Bootstrap 5 tốt hơn 4

Theo dõi và xem xét các thay đổi đối với tệp nguồn Bootstrap, tài liệu và thành phần để giúp bạn di chuyển từ v4 sang v5

phụ thuộc

• bỏ jQuery
• Nâng cấp từ Popper v1. x lên Popper v2. x
• Đã thay thế Libsass bằng Dart Sass vì trình biên dịch Sass của chúng tôi do Libsass cung cấp không được dùng nữa
• Đã di chuyển từ Jekyll sang Hugo để xây dựng tài liệu của chúng tôi

hỗ trợ trình duyệt

• Bỏ Internet Explorer 10 và 11
• Bỏ Microsoft Edge < 16 (Legacy Edge)
• Đã bỏ Firefox <60
• Safari bị rơi < 12
• Đã bỏ iOS Safari < 12
• Chrome bị rơi < 60

Thay đổi tài liệu

• Trang chủ, bố cục tài liệu và chân trang được thiết kế lại
• Đã thêm hướng dẫn bưu kiện mới
• Đã thêm phần Tùy chỉnh mới, thay thế trang Chủ đề của v4, với các chi tiết mới về Sass, tùy chọn cấu hình chung, bảng phối màu, biến CSS, v.v.
• Sắp xếp lại tất cả tài liệu biểu mẫu thành phần Biểu mẫu mới, chia nhỏ nội dung thành các trang tập trung hơn
• Tương tự, đã cập nhật phần Bố cục để hiển thị nội dung dạng lưới rõ ràng hơn
• Đã đổi tên trang thành phần “Navs” thành “Navs and Tabs”
• Đã đổi tên trang “Séc” thành “Séc và radio”
• Đã thiết kế lại thanh điều hướng và thêm một điều hướng con mới để dễ dàng truy cập các trang web và phiên bản tài liệu của chúng tôi hơn
• Đã thêm phím tắt mới cho trường tìm kiếm. Ctrl + /

ngổ ngáo

• Chúng tôi đã loại bỏ việc hợp nhất bản đồ Sass mặc định để giúp loại bỏ các giá trị dư thừa dễ dàng hơn. Hãy nhớ rằng bây giờ bạn phải xác định tất cả các giá trị trong bản đồ Sass như $theme-colors. Kiểm tra làm thế nào để đối phó với

• Phá vỡ Đổi tên hàm color-yiq() và các biến liên quan thành color-contrast() vì nó không còn liên quan đến không gian màu YIQ. Xem #30168

  • $yiq-contrasted-threshold được đổi tên thành $min-contrast-ratio
  • $yiq-text-dark và $yiq-text-light lần lượt được đổi tên thành $color-contrast-dark và $color-contrast-light

• Các tham số mixin truy vấn Breaking Media đã thay đổi để có cách tiếp cận hợp lý hơn

  • $theme-colors0 sử dụng chính điểm dừng thay vì điểm dừng tiếp theo (e. g. , $theme-colors1 thay vì $theme-colors2 nhắm mục tiêu các khung nhìn nhỏ hơn $theme-colors3)
  • Tương tự, tham số thứ hai trong $theme-colors4 cũng sử dụng chính điểm dừng thay vì điểm dừng tiếp theo (e. g. , $theme-colors5 thay vì $theme-colors6 nhắm mục tiêu cổng xem giữa $theme-colors7 và $theme-colors3)

• Breaking Loại bỏ các kiểu in và biến $theme-colors9. Các lớp hiển thị in vẫn còn xung quanh. Xem #28339

• Phá vỡ các hàm color-yiq()0, color-yiq()1 và color-yiq()2 có lợi cho các biến. Xem #29083

• Breaking Đổi tên hàm color-yiq()3 thành color-yiq()4 và hiện chấp nhận bất kỳ màu nào bạn muốn thay vì chỉ có màu color-yiq()5. Xem #29083 Coi chừng. color-yiq()4 sau đó đã bị loại bỏ trong color-yiq()7

• Breaking Đổi tên color-yiq()8 và color-yiq()9 thành color-contrast()0 và color-contrast()1 cho ngắn gọn

• Breaking Đã loại bỏ mixin color-contrast()2. Sử dụng lớp color-contrast()3 để thêm độ dốc cho các phần tử thay vì lớp color-contrast()4 đã tạo

• Breaking Đã loại bỏ các mixin không dùng nữa

  • color-contrast()5, color-contrast()6, color-contrast()7 và color-contrast()8
  • color-contrast()9
  • $yiq-contrasted-threshold0
  • $yiq-contrasted-threshold1
  • $yiq-contrasted-threshold2
  • $yiq-contrasted-threshold3 (cũng đã loại bỏ lớp tiện ích liên quan, $yiq-contrasted-threshold4)
  • $yiq-contrasted-threshold5
  • $yiq-contrasted-threshold6

• Phá vỡ Đổi tên hàm $yiq-contrasted-threshold7 thành $yiq-contrasted-threshold8 để tránh xung đột với chức năng chia tỷ lệ màu của chính Sass

• $yiq-contrasted-threshold9 mixin hiện cho phép giá trị $min-contrast-ratio0 và loại bỏ $min-contrast-ratio1 khỏi nhiều đối số. Xem #30394

• Mixin $min-contrast-ratio2 hiện có giá trị mặc định

hệ màu

• Hệ màu hoạt động với color-yiq()4 và $min-contrast-ratio4 đã bị loại bỏ để chuyển sang hệ màu mới. Tất cả các hàm $min-contrast-ratio5 và $min-contrast-ratio6 trong cơ sở mã của chúng tôi được thay thế bằng $min-contrast-ratio7 và $min-contrast-ratio8. Các chức năng này sẽ trộn màu với màu trắng hoặc đen thay vì thay đổi độ sáng của nó theo một lượng cố định. $yiq-contrasted-threshold8 sẽ pha màu hoặc tô màu tùy thuộc vào thông số trọng lượng của nó là dương hay âm. Xem #30622 để biết thêm chi tiết

• Đã thêm các sắc thái và sắc thái mới cho mọi màu, cung cấp chín màu riêng biệt cho từng màu cơ bản, dưới dạng các biến Sass mới

• Cải thiện độ tương phản màu sắc. Tỷ lệ tương phản màu bị giảm từ 3. 1 đến 4. 5. 1 và cập nhật các màu xanh dương, xanh lục, lục lam và hồng để đảm bảo WCAG 2. 1 AA tương phản. Đồng thời thay đổi màu tương phản màu của chúng tôi từ $yiq-text-dark0 thành $yiq-text-dark1

• Để hỗ trợ hệ thống màu của chúng tôi, chúng tôi đã thêm các chức năng $min-contrast-ratio7 và $min-contrast-ratio8 tùy chỉnh mới để trộn màu của chúng tôi một cách thích hợp

• Điểm dừng mới. Đã thêm điểm ngắt $yiq-text-dark4 mới cho $yiq-text-dark5 trở lên. Không có thay đổi đối với tất cả các điểm dừng khác

• Máng xối cải tiến. Máng xối hiện được đặt ở dạng rems và hẹp hơn v4 ($yiq-text-dark6, hoặc khoảng $yiq-text-dark7, giảm từ $yiq-text-dark8). Điều này sắp xếp các máng xối của hệ thống lưới của chúng tôi với các tiện ích khoảng cách của chúng tôi

  • Đã thêm lớp máng xối mới ($yiq-text-dark9, $yiq-text-light0 và $yiq-text-light1) để kiểm soát máng xối ngang/dọc, máng xối ngang và máng xối dọc
  • Breaking Đổi tên $yiq-text-light2 thành $yiq-text-light3 để phù hợp với các tiện ích máng xối mới

• Các cột không còn áp dụng $yiq-text-light4, vì vậy bạn có thể phải thêm $yiq-text-light5 vào một số phần tử để khôi phục hành vi đó

• Breaking Bỏ một số lớp $yiq-text-light6 thường không được sử dụng. Bây giờ chúng tôi chỉ cung cấp từ $yiq-text-light7 đến $yiq-text-light8

• Breaking đã loại bỏ thành phần $yiq-text-light9 vì nó có thể dễ dàng sao chép bằng các tiện ích. Xem #28265 và

• Phá vỡ $color-contrast-dark0 hiện chỉ áp dụng $color-contrast-dark1 cho cột thay vì đặt lại kích thước hộp chung. Bằng cách này, các kiểu lưới của chúng tôi có thể được sử dụng ở nhiều nơi hơn mà không bị nhiễu

• $color-contrast-dark2 không còn vô hiệu hóa việc tạo các lớp vùng chứa nữa. Xem #29146

• Đã cập nhật mixin $color-contrast-dark3 thành mặc định thành các cột bằng nhau mà không có kích thước được chỉ định

Nội dung, Khởi động lại, v.v.

• RFS hiện được bật theo mặc định. Các tiêu đề sử dụng hỗn hợp $color-contrast-dark4 sẽ tự động điều chỉnh $color-contrast-dark5 của chúng để chia tỷ lệ với chế độ xem. Tính năng này trước đây đã được chọn tham gia với v4

• Breaking Đại tu kiểu chữ hiển thị của chúng tôi để thay thế các biến $color-contrast-dark6 của chúng tôi và bằng bản đồ $color-contrast-dark7 Sass. Đồng thời loại bỏ các biến $color-contrast-dark8 riêng lẻ cho một $color-contrast-dark9 và các $color-contrast-dark5 đã điều chỉnh

• Đã thêm hai kích thước tiêu đề $color-contrast-light1 mới, $color-contrast-light2 và $color-contrast-light3

• Các liên kết được gạch chân theo mặc định (không chỉ khi di chuột), trừ khi chúng là một phần của các thành phần cụ thể

• Các bảng được thiết kế lại để làm mới kiểu của chúng và xây dựng lại chúng bằng các biến CSS để kiểm soát nhiều hơn đối với kiểu

• Phá vỡ các bảng lồng nhau không kế thừa các kiểu nữa

• Việc phá vỡ $color-contrast-light4 và $color-contrast-light5 bị loại bỏ để nhường chỗ cho các lớp biến thể $color-contrast-light6 có thể được sử dụng cho tất cả các thành phần bảng ($color-contrast-light7, $color-contrast-light8, $color-contrast-light9, $theme-colors00, $theme-colors01 và $theme-colors02)

• Breaking Mixin $theme-colors03 được đổi tên thành $theme-colors04 và chỉ chấp nhận 2 tham số. $theme-colors05 (tên màu) và $theme-colors06 (mã màu). Màu đường viền và màu nhấn được tự động tính toán dựa trên các biến hệ số bảng

• Chia các biến đệm ô của bảng thành $theme-colors07 và $theme-colors08

• Breaking Dropped lớp $theme-colors09. Xem #29135

• Phá vỡ tiện ích $theme-colors10 không thêm trạng thái di chuột và tiêu điểm vào liên kết nữa. Các lớp trợ giúp của $theme-colors11 có thể được sử dụng để thay thế. Xem #29267

• Breaking Dropped lớp $theme-colors12. Xem #29793

• Đặt lại mặc định ngang $theme-colors13 trên

  và
  các yếu tố từ trình duyệt mặc định $theme-colors14 đến $theme-colors15

  1. Đã thêm $theme-colors16, áp dụng $theme-colors17 trên toàn cầu—ngoại trừ người dùng yêu cầu giảm chuyển động thông qua truy vấn phương tiện $theme-colors18. Xem #31877

  RTL

  • Tất cả các biến, tiện ích và mixin cụ thể theo hướng ngang đều đã được đổi tên để sử dụng các thuộc tính logic giống như các thuộc tính được tìm thấy trong bố cục flexbox—e. g. , $theme-colors19 và $theme-colors20 thay cho $theme-colors21 và $theme-colors22

  Các hình thức

  • Đã thêm các hình thức nổi mới. Chúng tôi đã quảng cáo ví dụ Nhãn nổi cho các thành phần biểu mẫu được hỗ trợ đầy đủ. Xem trang Nhãn nổi mới

  • Phá vỡ các phần tử biểu mẫu gốc và biểu mẫu tùy chỉnh hợp nhất. Các hộp kiểm, radio, lựa chọn và các đầu vào khác có lớp gốc và lớp tùy chỉnh trong v4 đã được hợp nhất. Giờ đây, gần như tất cả các thành phần biểu mẫu của chúng tôi đều hoàn toàn tùy chỉnh, hầu hết không cần HTML tùy chỉnh

    • $theme-colors23 bây giờ là $theme-colors24
    • $theme-colors25 bây giờ là $theme-colors26
    • $theme-colors27 bây giờ là $theme-colors28
    • $theme-colors29 và $theme-colors30 đã được thay thế bằng các kiểu tùy chỉnh trên đầu trang của $theme-colors31
    • $theme-colors32 bây giờ là $theme-colors33
    • Đã bỏ bản địa $theme-colors34 và $theme-colors35

  • Breaking Drops $theme-colors36 và $theme-colors37. Giờ đây, bạn có thể chỉ cần thêm các nút và $theme-colors38 làm con trực tiếp của các nhóm đầu vào

  • Bán kính đường viền bị thiếu lâu nay trên nhóm đầu vào với lỗi phản hồi xác thực cuối cùng đã được sửa bằng cách thêm một lớp $theme-colors39 bổ sung vào các nhóm đầu vào có xác thực

  • Phá vỡ các lớp bố cục dành riêng cho biểu mẫu đã bị loại bỏ cho hệ thống lưới của chúng tôi. Sử dụng lưới và các tiện ích của chúng tôi thay vì $theme-colors40, $theme-colors41 hoặc $theme-colors42

  • Các nhãn Breaking Form hiện yêu cầu $theme-colors43

  • Phá vỡ $theme-colors44 không còn đặt $theme-colors45, cho phép bạn tạo văn bản trợ giúp nội tuyến hoặc khối theo ý muốn chỉ bằng cách thay đổi thành phần HTML

  • Các biểu tượng xác thực không còn được áp dụng cho $theme-colors46 và ghép nối nó với bất kỳ lớp $theme-colors47 nào trên $theme-colors48. Xem #30650. Tài liệu về điều này đã được chuyển từ trang Nút của chúng tôi sang phần Biểu mẫu mới

  • Breaking Dropped $theme-colors49 cho các tiện ích. Thay vì sử dụng $theme-colors49 trên $theme-colors47, hãy bọc các nút của bạn bằng $theme-colors52 và tiện ích $theme-colors53 để tạo khoảng cách cho chúng khi cần thiết. Chuyển sang các lớp đáp ứng để kiểm soát nhiều hơn đối với chúng.

  • Đã cập nhật các mixin $theme-colors54 và $theme-colors55 của chúng tôi để hỗ trợ các tham số bổ sung

  • Các nút được cập nhật để đảm bảo tăng độ tương phản khi di chuột và trạng thái hoạt động

  • Các nút bị vô hiệu hóa hiện có $theme-colors56

  Thẻ

  • Breaking Dropped $theme-colors57 ủng hộ lưới của chúng tôi. Bọc các thẻ của bạn trong các lớp cột và thêm vùng chứa $theme-colors58 chính để tạo lại các bộ bài (nhưng có nhiều quyền kiểm soát hơn đối với căn chỉnh đáp ứng)

  • Breaking Dropped $theme-colors59 ủng hộ Masonry. Xem #28922

  • Breaking Đã thay thế đàn accordion dựa trên $theme-colors60 bằng một thành phần Accordion mới

  băng chuyền

  • Đã thêm mới cho văn bản tối, điều khiển và chỉ báo (tuyệt vời cho nền sáng hơn)

  • Đã thay thế các biểu tượng chữ V cho các điều khiển băng chuyền bằng các SVG mới từ Biểu tượng Bootstrap

  nút đóng

  • Breaking Đổi tên $theme-colors62 thành $theme-colors63 cho một cái tên ít chung chung hơn

  • Các nút đóng hiện sử dụng $theme-colors64 (SVG được nhúng) thay vì $theme-colors65 trong HTML, cho phép tùy chỉnh dễ dàng hơn mà không cần phải chạm vào đánh dấu của bạn

  • Đã thêm biến thể $theme-colors66 mới sử dụng $theme-colors67 để cho phép các biểu tượng loại bỏ độ tương phản cao hơn trên nền tối hơn

  • Đã xóa neo cuộn cho đàn accordion

  thả xuống

  • Đã thêm biến thể $theme-colors68 mới và các biến được liên kết cho danh sách thả xuống tối theo yêu cầu

  • Đã thêm biến mới cho $theme-colors69

  • Làm tối dải phân cách thả xuống để cải thiện độ tương phản

  • Phá vỡ Tất cả các sự kiện cho danh sách thả xuống hiện được kích hoạt trên nút chuyển đổi danh sách thả xuống và sau đó nổi lên thành phần tử gốc

  • Menu thả xuống hiện có thuộc tính $theme-colors70 được đặt khi vị trí của danh sách thả xuống là tĩnh và $theme-colors71 khi danh sách thả xuống nằm trong thanh điều hướng. Điều này được thêm bởi JavaScript của chúng tôi và giúp chúng tôi sử dụng các kiểu vị trí tùy chỉnh mà không can thiệp vào vị trí của Popper

  • Tùy chọn Breaking Dropped $theme-colors72 cho plugin thả xuống có lợi cho cấu hình Popper gốc. Bây giờ bạn có thể vô hiệu hóa hành vi lật bằng cách chuyển một mảng trống cho tùy chọn trong công cụ sửa đổi lật

  • Các menu thả xuống hiện có thể nhấp được với tùy chọn $theme-colors74 mới để xử lý. Bạn có thể sử dụng tùy chọn này để chấp nhận nhấp vào bên trong hoặc bên ngoài menu thả xuống để làm cho nó tương tác

  • Danh sách thả xuống hiện hỗ trợ các $theme-colors75 được bao bọc trong

  • s

  Jumbotron

  Nhóm danh sách

  Điều hướng và tab

  • Đã thêm các biến $min-contrast-ratio0 mới cho $color-contrast-dark5, ________ 078, ________ 079 và ________ 080 ________ 079 vào lớp $theme-colors82
  • Phá vỡ các thanh điều hướng hiện yêu cầu một vùng chứa bên trong (để đơn giản hóa đáng kể các yêu cầu về khoảng cách và yêu cầu CSS)

  vải bố

  • Các liên kết phân trang hiện có $theme-colors83 có thể tùy chỉnh được làm tròn động ở tất cả các góc khi tách biệt với nhau

  • Đã thêm $theme-colors84s vào các liên kết phân trang

  Popovers

  • Breaking Đổi tên $theme-colors85 thành $theme-colors86 trong mẫu cửa sổ bật lên mặc định của chúng tôi

  • Đã đổi tên tùy chọn $theme-colors87 thành $theme-colors88

  người kéo sợi

  • Người quay hiện tôn vinh $theme-colors89 bằng cách làm chậm hoạt ảnh. Xem #31882

  • Cải thiện căn chỉnh dọc spinner

  chúc rượu

  • Chúc mừng giờ đây có thể ở trong một $theme-colors90 với sự trợ giúp của các tiện ích định vị

  • Đã thay đổi thời lượng bánh mì nướng mặc định thành 5 giây

  • Đã xóa $theme-colors91 khỏi chúc mừng và thay thế bằng các $theme-colors92 phù hợp với các chức năng của $theme-colors93

  • Breaking Đổi tên $theme-colors85 thành $theme-colors95 trong mẫu chú giải công cụ mặc định của chúng tôi

  • Phá vỡ Giá trị mặc định cho $theme-colors73 được thay đổi thành $theme-colors97 để bố trí các phần tử Popper tốt hơn. Áp dụng cho danh sách thả xuống, cửa sổ bật lên và chú giải công cụ

    Bạn nên học Bootstrap 4 hay 5?

    Bootstrap 4 hoặc 5 cái nào đáng tin cậy hơn? . Bạn có thể sử dụng Bootstrap 4/5 tùy theo yêu cầu. Đáng tin cậy nhất là phiên bản 4 , vì nó có cộng đồng lớn, trong trường hợp bạn gặp sự cố, bạn có thể giải quyết dễ dàng.

    Bootstrap 5 có đáng không?

    Tuy nhiên, chúng tôi thực sự khuyên bạn nên sử dụng cái mới hơn. Theo các nhà phát triển Bootstrap, phiên bản này đã rất ổn định và hơn nữa, nó thực sự đi kèm với những cải tiến tuyệt vời

    Phiên bản Bootstrap nào là tốt nhất?

    Phiên bản Bootstrap .

    B3. Tìm hiểu Bootstrap 3 » Bootstrap 3 là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu

    B 4. Tìm hiểu Bootstrap 4 ».

    B5. Tìm hiểu Bootstrap 5 »

    Bootstrap 5 hiện có ổn định không?

    Bootstrap v5. 2. 0 cuối cùng cũng ổn định . Chúng tôi đã khắc phục nhiều lỗi hơn, cải thiện nhiều tài liệu hơn, viết các hướng dẫn mới và xây dựng các ví dụ về môi trường chức năng mới, v.v.