Hướng dẫn is bootstrap 5 stable now? - bootstrap 5 có ổn định không?

Bootstrap 5 đã chính thức hạ cánh! Sau ba bảng chữ cái, ba betas và vài tháng làm việc chăm chỉ, chúng tôi đã vận chuyển bản phát hành ổn định đầu tiên của phiên bản lớn mới của chúng tôi. Đó là một chuyến đi hoang dã được thực hiện bởi những người bảo trì của chúng tôi và cộng đồng tuyệt vời sử dụng và đóng góp cho bootstrap. Cảm ơn tất cả những người đã giúp chúng tôi đến đây!

Hãy tiếp tục đọc chi tiết về những gì mới của V4 so với V4 và những gì sắp tới cho các bản phát hành tiếp theo. Bạn muốn có được quyền của nó? Đi đến các tài liệu V5 mới hoặc bay bên ghế quần của bạn và chỉ npm i bootstrap.Head to the new v5 docs or fly by the seat of your pants and just npm i bootstrap.

Trong bài đăng này:

• Logo mới!
• Thành phần OffCanvas mới
• Accordion mới
• Các biểu mẫu mới và cập nhật
  • Kiểm tra và radio
  • Nhãn nổi
  • Đầu vào tập tin mới
  • Bố cục đơn giản hóa
• RTL đang ở đây!
• Đại tu các tiện ích
  • API tiện ích mới
  • Tiện ích mới
  • Thuộc tính logic cho các tiện ích khoảng cách
• Ví dụ đoạn trích mới
• Lưới và bố cục
• Cập nhật thành phần hơn
• Cải thiện tùy chỉnh
• Phi tiêu sass
• Hỗ trợ trình duyệt
• JavaScript
• Hướng dẫn di cư
• Nhận bản phát hành
• Cái gì tiếp theo
• Xem trước v5.1.0
• Hỗ trợ đội

Logo mới!

Thành phần OffCanvas mới

Accordion mới

Thành phần OffCanvas mới

Accordion mới

Các biểu mẫu mới và cập nhật

Accordion mới

Các biểu mẫu mới và cập nhật

Kiểm tra và radio

Nhãn nổi

Các biểu mẫu mới và cập nhật

Kiểm tra và radio

Nhãn nổi

Kiểm tra và radio

Nhãn nổi

  
  
    Default checkbox
  



  
  
    Default radio
  



  
  Default switch checkbox input

Đầu vào tập tin mới

Nhãn nổi

Đầu vào tập tin mới

Đầu vào tập tin mới

Bố cục đơn giản hóa

RTL đang ở đây!

Đại tu các tiện ích

API tiện ích mới

RTL đang ở đây!

Đại tu các tiện ích

• API tiện ích mới, which includes our grid, Reboot, utilities, and standard bundles. See the Contents page for a full list of files.

• Tài liệu RTL mới để giúp bạn bắt đầu. to help you get started.

• Năm ví dụ RTL mới cho thấy RTL CSS mới của chúng tôi trong hành động, chuyển đổi album, Checkout, Carousel, Blog và Dashboard của chúng tôi thành các ví dụ tương đương từ phải hoàn toàn mới. that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all-new right-to-left equivalents.

• Hai trang bồn rửa nhà bếp mới của nhà bếp mới, bảng tính gian lận mặc định cho CSS tiêu chuẩn của chúng tôi và RTL Cheatsheet.—the default cheatsheet for our standard CSS and the RTL cheatsheet.

Cách tiếp cận của chúng tôi được xây dựng trên RTLCSS, một dự án tuyệt vời giúp xử lý lại bảng kiểu LTR hiện có cho RTL. Bây giờ chúng tôi đã phân loại nó là một tính năng thử nghiệm, dự đoán rằng chúng tôi sẽ nhận được một số sai lầm này. Chúng tôi đang tìm kiếm cộng đồng để giúp chúng tôi làm tròn tính năng này khi chúng tôi kết thúc một số Todos còn lại.

Đại tu các tiện ích

Với các khuôn khổ dựa trên tiện ích tình yêu đã thu hút được vài năm qua, chúng tôi đã đầu tư vào việc thêm nhiều tiện ích vào Bootstrap cùng với một phương pháp mới để quản lý chúng trong các dự án của bạn.

API tiện ích mới

Chúng tôi đã triển khai API tiện ích hoàn toàn mới thành Bootstrap 5 như là cách chính để mở rộng các lớp tiện ích mặc định của Bootstrap. Dễ dàng tạo và tùy chỉnh các tiện ích với hỗ trợ cho tên lớp tùy chỉnh, hỗ trợ để tạo các lớp dựa trên trạng thái như

$utilities: [] !default;
$utilities: map-merge[
  [
    // ...
    "margin": [
      responsive: true,
      property: margin,
      class: m,
      values: map-merge[$spacers, [auto: auto]]
    ],
    // ...
    "opacity": [
      property: o,
      class: opacity,
      state: hover,
      values: [
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ]
    ]
    // ...
  ], $utilities];

3, phiên bản in và hơn thế nữa.

$utilities: [] !default;
$utilities: map-merge[
  [
    // ...
    "margin": [
      responsive: true,
      property: margin,
      class: m,
      values: map-merge[$spacers, [auto: auto]]
    ],
    // ...
    "opacity": [
      property: o,
      class: opacity,
      state: hover,
      values: [
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ]
    ]
    // ...
  ], $utilities];

Kể từ khi các tiện ích trở thành một cách được ưu tiên để xây dựng, chúng tôi đã làm việc để tìm sự cân bằng phù hợp để thực hiện chúng trong bootstrap trong khi cung cấp kiểm soát và tùy biến. Trong V4, chúng tôi đã làm điều này với các lớp

$utilities: [] !default;
$utilities: map-merge[
  [
    // ...
    "margin": [
      responsive: true,
      property: margin,
      class: m,
      values: map-merge[$spacers, [auto: auto]]
    ],
    // ...
    "opacity": [
      property: o,
      class: opacity,
      state: hover,
      values: [
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ]
    ]
    // ...
  ], $utilities];

4 toàn cầu và chúng tôi thậm chí còn tiến lên trong V5. Nhưng với cách tiếp cận dựa trên API, chúng tôi đã tạo ra một ngôn ngữ và cú pháp trong SASS để tạo ra các tiện ích của riêng bạn một cách nhanh chóng trong khi cũng có thể sửa đổi hoặc loại bỏ chúng tôi cung cấp.

Đi đến tài liệu API Utility API mới để tìm hiểu thêm.

Tiện ích mới

Nói về các tiện ích, chúng tôi đã thêm một tấn những cái mới vào kho vũ khí của chúng tôi, bao gồm:

• Đã thêm các tiện ích định vị:

  $utilities: [] !default;
  $utilities: map-merge[
    [
      // ...
      "margin": [
        responsive: true,
        property: margin,
        class: m,
        values: map-merge[$spacers, [auto: auto]]
      ],
      // ...
      "opacity": [
        property: o,
        class: opacity,
        state: hover,
        values: [
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        ]
      ]
      // ...
    ], $utilities];
  

  5,

  $utilities: [] !default;
  $utilities: map-merge[
    [
      // ...
      "margin": [
        responsive: true,
        property: margin,
        class: m,
        values: map-merge[$spacers, [auto: auto]]
      ],
      // ...
      "opacity": [
        property: o,
        class: opacity,
        state: hover,
        values: [
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        ]
      ]
      // ...
    ], $utilities];
  

  6,

  $utilities: [] !default;
  $utilities: map-merge[
    [
      // ...
      "margin": [
        responsive: true,
        property: margin,
        class: m,
        values: map-merge[$spacers, [auto: auto]]
      ],
      // ...
      "opacity": [
        property: o,
        class: opacity,
        state: hover,
        values: [
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        ]
      ]
      // ...
    ], $utilities];
  

  7 và

  $utilities: [] !default;
  $utilities: map-merge[
    [
      // ...
      "margin": [
        responsive: true,
        property: margin,
        class: m,
        values: map-merge[$spacers, [auto: auto]]
      ],
      // ...
      "opacity": [
        property: o,
        class: opacity,
        state: hover,
        values: [
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        ]
      ]
      // ...
    ], $utilities];
  

  8 với các giá trị

  $utilities: [] !default;
  $utilities: map-merge[
    [
      // ...
      "margin": [
        responsive: true,
        property: margin,
        class: m,
        values: map-merge[$spacers, [auto: auto]]
      ],
      // ...
      "opacity": [
        property: o,
        class: opacity,
        state: hover,
        values: [
          0: 0,
          25: .25,
          50: .5,
          75: .75,
          100: 1,
        ]
      ]
      // ...
    ], $utilities];
  

  9, npm i bootstrap0 và npm i bootstrap1
• Đã thêm tùy chọn npm i bootstrap2, cùng với các tiện ích npm i bootstrap3 mới cho bố cục lưới dễ dàng
• Đã thêm npm i bootstrap4 Tiện ích cho npm i bootstrap5
• Đổi tên thành các tiện ích npm i bootstrap6 thành npm i bootstrap7
• Đã thêm npm i bootstrap8, npm i bootstrap9 và B0 cho các tiện ích nhỏ, vừa và lớn B1
• Đã thêm B2 và B3 Tiện ích

Kiểm tra hướng dẫn di chuyển và tài liệu tiện ích để biết thêm chi tiết.

Thuộc tính logic cho các tiện ích khoảng cách

Một phần trong cách tiếp cận của chúng tôi để thêm RTL vào Bootstrap là thêm nó theo cách cảm thấy thân thiện với tương lai với chính chúng ta và Web nói chung. Như vậy, chúng tôi đã chấp nhận tinh thần của các thuộc tính logic CSS và đã đổi tên một số lớp và biến. Đó là một sự thay đổi rủi ro vì quy mô và tác động của sự thay đổi, nhưng chúng tôi hy vọng bạn sẽ đánh giá cao nó về tổng thể!have renamed several classes and variables. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!

Hầu hết các bạn đã tương tác với các thuộc tính logic nhờ các tiện ích flex của chúng tôi, họ thay thế các thuộc tính hướng như

$utilities: [] !default;
$utilities: map-merge[
  [
    // ...
    "margin": [
      responsive: true,
      property: margin,
      class: m,
      values: map-merge[$spacers, [auto: auto]]
    ],
    // ...
    "opacity": [
      property: o,
      class: opacity,
      state: hover,
      values: [
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ]
    ]
    // ...
  ], $utilities];

8 và

$utilities: [] !default;
$utilities: map-merge[
  [
    // ...
    "margin": [
      responsive: true,
      property: margin,
      class: m,
      values: map-merge[$spacers, [auto: auto]]
    ],
    // ...
    "opacity": [
      property: o,
      class: opacity,
      state: hover,
      values: [
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ]
    ]
    // ...
  ], $utilities];

6 ủng hộ B6 và B7. Những thứ như B8 đã được hoan nghênh bổ sung. Điều này làm cho các tên lớp định hướng ngang phù hợp với LTR và RTL mà không cần thêm chi phí nào về phía trước.

Ví dụ: trong bối cảnh LTR, thay vì B9 cho data0, sử dụng data1. Hãy chắc chắn đọc Hướng dẫn di chuyển RTL để biết danh sách đầy đủ các lớp và biến đổi tên.

Ví dụ đoạn trích mới

Chúng tôi đã thêm bốn ví dụ nặng về đoạn trích hoàn toàn mới và làm mới một vài ví dụ khác trong khi chúng tôi ở đó. Các ví dụ đoạn trích mới này có một số biến thể của các thành phần phổ biến, được phục vụ theo các cách khác nhau để bạn dễ dàng sao chép và dán.

• Tiêu đề
• Anh hùng
• Đặc trưng
• Sidebars

Những đoạn trích mới này sẽ tiếp tục phát triển với những bổ sung mới theo thời gian, cho thấy sự vui vẻ và dễ dàng của việc xây dựng với bootstrap.

Chúng tôi cũng đã cập nhật mẫu khởi động của chúng tôi với thiết kế được làm mới và nhiều tài nguyên hơn.

Lưới và bố cục

Các tùy chọn hệ thống lưới và bố cục của chúng tôi đã thấy một số thay đổi để hợp lý hóa và cải thiện mọi thứ, cụ thể là:

• Các lớp cột hiện có thể được sử dụng làm tiện ích data2 [ví dụ: data3 là data4] vì data5 không còn được áp dụng bên ngoài data6.
• Các tiện ích máng mới có thể tùy chỉnh đáp ứng một cách đáp ứng máng xối theo chiều ngang và dọc. Chiều rộng máng xối cũng đã được giảm xuống còn data7.
• Đã xóa data8 khỏi các lớp cột
• Đã bỏ thành phần data9 cho các tiện ích

Chúng tôi cũng đã cập nhật tài liệu bố cục của chúng tôi để chia các trang dài đặc biệt vào các chủ đề tập trung hơn. Chúng tôi cũng đã thêm một lời giải thích được làm rõ về các điểm dừng, container, và nhiều hơn nữa.

Kiểm tra hướng dẫn di chuyển và tài liệu bố cục để biết thêm chi tiết.

Cập nhật thành phần hơn

Trên toàn bảng, chúng tôi đã thực hiện một số cải tiến và thay đổi khác đối với các thành phần chính:

• Chúng tôi đã đại tu JavaScript và định vị cho các thả xuống của chúng tôi như là một phần của việc áp dụng Popper 2. Bạn có thể thấy tất cả các tùy chọn trong một ví dụ mới trong các trình chọn và thuộc tính dữ liệu CSS mới của chúng tôi được sử dụng để định vị chúng.
• Các menu thả xuống hiện có lớp sửa đổi .card0 mới.
• Tương tự, các băng chuyền hiện có lớp sửa đổi .card1 mới để đảo ngược các điều khiển, văn bản và các chỉ số.
• Đã thêm các ví dụ biểu tượng vào thành phần cảnh báo của chúng tôi để thêm các biểu tượng bootstrap [hoặc các thư viện biểu tượng khác] bằng cách sử dụng các tiện ích
• Nút đóng của chúng tôi đã được thiết kế lại với SVG .card2 và kiểu dáng chéo được cải tiến.
• Chúng tôi đã bỏ lớp .card3 cho các tiện ích.
• Chúng tôi đã cập nhật NAVBARS với .card4 mới cho .card5 theo chiều dọc và cuộn khi một chiếc thuyền nang được sụp đổ được mở
• Các nhóm danh sách có lớp sửa đổi .card6 mới sử dụng các yếu tố giả để tạo các mục nhóm danh sách được đánh số.

Cải thiện tùy chỉnh

Chúng tôi đã hạ gục và cải thiện tài liệu của chúng tôi ở một số nơi, đưa ra nhiều lời giải thích hơn, loại bỏ sự mơ hồ và cung cấp nhiều hỗ trợ hơn cho việc mở rộng bootstrap. Tất cả bắt đầu với một phần tùy chỉnh hoàn toàn mới.

V5, Tùy chỉnh các tài liệu mở rộng trên trang theo chủ đề V4 với nhiều nội dung và đoạn mã hơn để xây dựng trên các tệp SASS nguồn Bootstrap. Chúng tôi đã đưa ra nhiều nội dung hơn ở đây và thậm chí cung cấp một dự án NPM khởi đầu để bạn bắt đầu với nhanh hơn và dễ dàng hơn. Nó cũng có sẵn dưới dạng repo mẫu trên GitHub, vì vậy bạn có thể tự do ngã ba và đi.

Chúng tôi cũng đã mở rộng bảng màu của chúng tôi trong V5. Với một hệ thống màu rộng được tích hợp, bạn có thể dễ dàng tùy chỉnh giao diện của ứng dụng mà không bao giờ rời khỏi cơ sở mã. Chúng tôi cũng đã thực hiện một số công việc để cải thiện độ tương phản màu sắc và thậm chí cung cấp các số liệu tương phản màu trong các tài liệu màu của chúng tôi. Hy vọng rằng, điều này sẽ tiếp tục giúp làm cho các trang web hỗ trợ bootstrap dễ tiếp cận hơn với mọi người.

Chúng tôi cũng đã thêm các phần mới vào hầu hết các trang của chúng tôi để ghi lại mã SAS nguồn cung cấp năng lượng cho từng thành phần. Các biến, mixin, vòng lặp và bản đồ đều được hiển thị và cập nhật trong mỗi trang, giúp bạn dễ dàng tham khảo và tùy chỉnh các giá trị hơn khi bạn xây dựng.

Phi tiêu sass

Chúng tôi đã chuyển sang DART SASS với Libsass bị không nhận. Chúng tôi đã thử nghiệm các bản dựng của chúng tôi với DART SASS trong một thời gian và quyết định thực hiện chuyển đổi với Libsass được không dùng nữa vài tuần trước. Bây giờ chúng tôi đang giữ các mô -đun SASS. Chúng tôi vẫn không sử dụng hệ thống mô -đun mới cho các mối quan tâm tương thích và khoảng cách lớn hơn để nâng cấp từ V4.

Hỗ trợ trình duyệt

Chúng tôi đã bỏ một tấn các trình duyệt cũ hơn trong bản cập nhật này, khiến nó trở thành một trong những bước nhảy vọt lớn nhất của chúng tôi trong một thời gian:

• Bỏ Microsoft Edge Legacy
• Đã bỏ Internet Explorer 10 và 11
• Firefox rơi xuống