Bootstrap - Lớp trợ giúp

Chương này thảo luận về một số lớp trợ giúp trong Bootstrap có thể hữu ích.

Đóng biểu tượng

Sử dụng biểu tượng đóng chung để loại bỏ nội dung như phương thức và cảnh báo. Sử dụng lớp họcclose để lấy biểu tượng đóng.

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      &times;
   </button>
</p>

Carets

Sử dụng dấu mũ để biểu thị chức năng và hướng thả xuống. Để có được chức năng này, hãy sử dụng lớpcaret với một phần tử <span>.

<p>Caret Example<span class = "caret"></span></p>

Phao nhanh

Bạn có thể thả nổi một phần tử sang trái hoặc phải với lớp pull-left hoặc là pull-right tương ứng, ví dụ sau đây chứng minh điều này.

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

Để căn chỉnh các thành phần trong thanh điều hướng với các lớp tiện ích, hãy sử dụng .navbar-left hoặc là .navbar-rightthay thế. Xem chương điều hướng để biết chi tiết.

Khối nội dung trung tâm

Sử dụng lớp học center-block để đặt một phần tử ở giữa.

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

Để xóa float của bất kỳ phần tử nào, hãy sử dụng .clearfix lớp học.

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
   
</div>

Hiển thị và Ẩn Nội dung

Bạn có thể buộc hiển thị hoặc ẩn một phần tử (kể cả đối với trình đọc màn hình) bằng cách sử dụng các lớp .show và .hidden.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
   
</div>

Nội dung trình đọc màn hình

Bạn có thể ẩn một phần tử cho tất cả các thiết bị ngoại trừ trình đọc màn hình với lớp .sr-only.

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
      
   </form>
</div>

Ở đây, chúng ta có thể thấy rằng nhãn của cả hai kiểu đầu vào được gán cho lớp sr-only, do đó nhãn sẽ chỉ hiển thị với trình đọc màn hình.