Bootstrap: Các tiện ích responsive
Đối với nhu cầu phát triển các ứng dụng thân thiện với thiết bị di động, chúng tôi sử dụng những class tiện ích này để ẩn và hiện nội dung trên các thiết bị khác nhau thông qua media query. Ngoài ra, các class tiện ích dành cho việc đóng/mở nội dung để in ra cũng được thêm vào.
Hãy cố gắng sử dụng những class này một cách giới hạn và tránh việc tạo ra quá nhiều các phiên bản hoàn toàn khác nhau trên cùng một trang. Thay vì thế, hãy sử dụng chúng để bổ sung cho việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện tại chỉ có tác dụng đối với các phần tử dạng khối (display:block hoặc display:inline-block) và bảng. Việc sử dụng các phần tử cùng dòng (display:inline) và các phần tử nằm trong bảng (<tr>, <td>,...) sẽ không được hỗ trợ responsive.
Các class sẵn có
Sử dụng đơn lẻ hoặc kết hợp các class sẵn có để ẩn/hiện nội dung tương ứng với các mốc kích thước của khung nhìn.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Visible | Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible | Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible | Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
| Group of classes | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.
Các class dành cho in ấn
Tương tự như các class responsive thông thường, sử dụng các class sau để ẩn/hiện nội dung phục vụ cho việc in ấn.
| Classes | Browser | |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Class .visible-print cũng tồn tại nhưng đã bị loại bỏ trong phiên bản 3.2.0. Class này sử dụng tương tự như class .visible-print-block, ngoại trừ một số trường hợp đặc biệt như đối với các thành phần liên quan đến <table>.
Các trường hợp test
Thay đổi kích thước trình duyệt của bạn hoặc tải trang trên các thiết bị khác nhau để test các class responsive tiện ích.
Hiển thị trên...
Dấu tích màu xanh chỉ định phần tử nào đang hiển thị trên khung nhìn hiện tại của bạn.
Ẩn đi trên...
Và ở đây, dấu tích màu xanh cũng chỉ định phần tử nào đang bị ẩn đi trên khung nhìn hiện tại của bạn.