Mở khóa các tính năng mới thú vị của nó

Bootstrap là một khung giao diện người dùng phổ biến đã cách mạng hóa quá trình phát triển web. Với bản phát hành mới nhất, Bootstrap 5.3.0, khung này đã giới thiệu vô số tính năng và cải tiến mới thú vị cho phép bạn tạo các trang web và ứng dụng tuyệt đẹp, đáp ứng nhanh, giàu tính năng.

Chuyển đổi chế độ tối

Một trong những bổ sung đáng chú ý của Bootstrap 5.3.0 là chuyển đổi sang chế độ tối. Chuyển đổi này cho phép người dùng trang web của bạn dễ dàng chuyển đổi giữa chế độ sáng và tối, tạo điều kiện sử dụng liền mạch trang web hoặc ứng dụng của bạn trong các điều kiện ánh sáng khác nhau.

Để sử dụng tính năng này, chỉ cần thêm data-bs-toggle=”chế độ tối” thuộc tính cho bất kỳ nút hoặc phần tử liên kết nào.

Đây là một ví dụ:

 <button type="button" class="btn btn-primary" data-bs-toggle="dark-mode">
   Toggle Dark Mode
</button> 

Tiện ích tỷ lệ phông chữ

Bootstrap 5.3.0 giới thiệu một tập hợp các tiện ích tỷ lệ phông chữ cho phép bạn nhanh chóng điều chỉnh kích thước văn bản của mình dựa trên các tỷ lệ được xác định trước mà không cần phải tự chọn các giá trị phông chữ cụ thể.

Bạn có thể sử dụng các tiện ích này kết hợp với các lớp kiểu chữ Bootstrap khác để đạt được kiểu chữ nhất quán và có thể mở rộng trên trang web hoặc ứng dụng của bạn.

Dưới đây là một vài ví dụ về cách bạn có thể sử dụng các tiện ích tỷ lệ phông chữ:

 <p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p> 

Máng xối tiện ích

Một bổ sung mới khác trong Bootstrap 5.3.0 là sự ra đời của các tiện ích máng xối. Các tiện ích này giúp dễ dàng thêm các rãnh giữa các cột trong bố cục lưới Bootstrap của bạn mà không cần phải viết CSS tùy chỉnh.

Đây là một ví dụ về cách bạn có thể sử dụng các tiện ích máng xối:

 <div class="row gx-3"> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div>
</div> 

Ví dụ này sử dụng gx-3 class để thêm một rãnh 3 đơn vị (hoặc 1,5rem) giữa hai cột.

Kiểm soát biểu mẫu được cập nhật

Các điều khiển biểu mẫu trong Bootstrap đã được cập nhật trong phiên bản 5.3.0 để cải thiện tính nhất quán và khả năng sử dụng. Các điều khiển biểu mẫu mới bao gồm các kiểu được cập nhật cho hộp kiểm, nút radio và hộp chọn, cũng như phản hồi xác thực được cải thiện.

Hộp kiểm và nút radio

Bootstrap 5.3.0 giới thiệu các kiểu mới cho hộp kiểm và nút radio giúp chúng dễ sử dụng và dễ truy cập hơn. Thiết kế mới có các khu vực trúng lớn hơn và các chỉ số tiêu điểm được cải thiện, giúp bạn tương tác với các đầu vào này dễ dàng hơn.

Đây là một ví dụ về cách bạn có thể sử dụng các kiểu hộp kiểm mới:

 <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="check1"> 
    <label class="form-check-label" for="check1">Default checkbox</label>
</div> 

Và đây là một ví dụ về cách bạn có thể sử dụng các kiểu nút radio mới:

 <div class="form-check"> 
    <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1"> 
    <label class="form-check-label" for="radio1"> Option 1 </label>
</div> 

Lưu ý cách đánh dấu này sử dụng .form-check-input lớp để tạo kiểu cho chính phần tử đầu vào và .form-check-nhãn class để tạo kiểu cho nhãn.

Chọn hộp

Các hộp chọn cũng đã được cập nhật trong Bootstrap 5.3.0 với các kiểu mới để có tính nhất quán và khả năng sử dụng tốt hơn. Các kiểu hộp chọn mới có các vùng nhấn lớn hơn và các chỉ số tiêu điểm được cải thiện, giúp bạn tương tác với các đầu vào này dễ dàng hơn.

Đây là một ví dụ về cách bạn có thể sử dụng các kiểu hộp chọn mới:

 <select class="form-select" aria-label="Default select example"> 
  <option selected>Open this select menu</option> 
  <option value="1">One</option> 
  <option value="2">Two</option> 
  <option value="3">Three</option>
</select> 

Lưu ý cách bạn có thể sử dụng .form-select class để tự tạo kiểu cho hộp chọn.

Phản hồi xác thực

Bootstrap 5.3.0 cũng giới thiệu các kiểu phản hồi xác thực mới cho các điều khiển biểu mẫu. Những kiểu này giúp cung cấp phản hồi trực quan cho người dùng trang web của bạn dễ dàng hơn khi họ điền sai biểu mẫu.

Đây là một ví dụ về cách bạn có thể sử dụng các kiểu xác thực mới:

 <div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="password" class="form-control is-invalid" id="exampleInputPassword1" placeholder="Password" required> 
   <div class="invalid-feedback"> Please provide a valid password. </div>
</div> 

Chú ý cách .không có hiệu lực lớp chỉ ra rằng trường đầu vào không hợp lệ và .invalid-feedback lớp hiển thị một thông báo cho người dùng.

Với những kiểu mới này, việc tạo các biểu mẫu nhất quán và có thể truy cập cho trang web hoặc ứng dụng của bạn trở nên dễ dàng hơn bao giờ hết.

Những cải tiến thú vị trong Bootstrap 5.3.0

Bootstrap 5.3.0 là một bản cập nhật quan trọng cho khung CSS phổ biến mang đến một số tính năng và cải tiến mới cho bảng. Từ chuyển đổi chế độ tối sang các tiện ích tỷ lệ phông chữ và tiện ích máng xối, có rất nhiều công cụ mới để bạn tùy ý sử dụng nhằm giúp bạn xây dựng các trang web và ứng dụng tốt hơn.