Cấp bậc tác giả:

HTML

Phần 9 CSS3 - Các tiện ích responsive

Được viết bởi webmaster ngày 01/11/2019 lúc 11:15 AM
Đố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.
  • 0
  • 56

Phần 9 CSS3 - Các tiện ích responsive

Loading...

Đố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 devicesPhones (<768px)Small devicesTablets (≥768px)Medium devicesDesktops (≥992px)Large devicesDesktops (≥1200px)
.visible-xs-*Visible
.visible-sm-*Visible
.visible-md-*Visible
.visible-lg-*Visible
.hidden-xsVisibleVisibleVisible
.hidden-smVisibleVisibleVisible
.hidden-mdVisibleVisibleVisible
.hidden-lgVisibleVisibleVisible

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 classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: 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.

ClassesBrowserPrint
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-printVisible

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.

Medium
✔ Visible on large
✔ Visible on medium and large
✔ Visible on small and large
✔ Visible on x-small and large










Ẩ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.

Medium
✔ Hidden on large
✔ Hidden on medium and large
✔ Hidden on small and large
✔ Hidden on x-small and large

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML