Bootstrap - Tiện ích đáp ứng

Bootstrap cung cấp một số lớp trợ giúp hữu ích để phát triển thân thiện với thiết bị di động nhanh hơn. Chúng có thể được sử dụng để hiển thị và ẩn nội dung theo thiết bị thông qua truy vấn phương tiện, kết hợp với các thiết bị lớn, nhỏ và vừa.

Sử dụng những thứ này một cách tiết kiệm và tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web. Responsive utilities are currently only available for block and table toggling.

Các lớp học	Thiết bị
.visible-xs	Cực nhỏ (dưới 768px) hiển thị
.visible-sm	Nhỏ (lên đến 768 px) hiển thị
.visible-md	Trung bình (768 px đến 991 px) hiển thị
.visible-lg	Lớn hơn (992 px trở lên) hiển thị
.hides-xs	Cực nhỏ (nhỏ hơn 768px) bị ẩn
.hides-sm	Nhỏ (lên đến 768 px) ẩn
.hides-md	Trung bình (768 px đến 991 px) ẩn
.hides-lg	Lớn hơn (992 px trở lên) bị ẩn

In lớp học

Bảng sau liệt kê các lớp in. Sử dụng chúng để chuyển đổi nội dung cho bản in.

Các lớp học	In
.visible-print	Có Hiển thị
.hides-print	Chỉ hiển thị với trình duyệt không in.

Thí dụ

Ví dụ sau minh họa việc sử dụng các lớp trợ giúp được liệt kê ở trên. Thay đổi kích thước trình duyệt của bạn hoặc tải ví dụ trên các thiết bị khác nhau để kiểm tra các lớp tiện ích đáp ứng.

<div class = "container" style = "padding: 40px;">
   <div class = "row visible-on">
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-xs">Extra small</span>
         <span class = "visible-xs">✔ Visible on x-small</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-sm">Small</span>
         <span class = "visible-sm">✔ Visible on small</span>
      </div>
      
      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-md">Medium</span>
         <span class = "visible-md">✔ Visible on medium</span>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <span class = "hidden-lg">Large</span>
         <span class = "visible-lg">✔ Visible on large</span>
      </div>
      
   </div>  
</div>

Checkmarks cho biết rằng phần tử hiển thị trong khung nhìn hiện tại của bạn.