Làm thế nào nó hoạt động
Thay đổi giá trị của thuộc tính display
với các lớp tiện ích hiển thị đáp ứng của chúng tôi. Chúng tôi cố tình hỗ trợ một tập hợp con của tất cả các giá trị có thể cho display
. Các lớp học có thể được kết hợp cho các hiệu ứng khác nhau khi bạn cần.
Ký hiệu
Hiển thị các lớp tiện ích áp dụng cho tất cả các điểm dừng, từ xs
đến xxl
, không có chữ viết tắt điểm dừng trong chúng. Điều này là do các lớp đó được áp dụng từ min-width: 0;
trở lên, và do đó không bị ràng buộc bởi một truy vấn truyền thông. Tuy nhiên, các điểm dừng còn lại bao gồm viết tắt điểm dừng.
Như vậy, các lớp được đặt tên bằng định dạng:
0 chod-block d-block
xs
2 chod-block d-block
3,d-block d-block
4,d-block d-block
5,d-block d-block
6 vàd-block d-block
xxl
.
Giá trị là một trong những:
8d-block d-block
9d-block d-block
0hide on lg and wider screens hide on screens smaller than lg
1hide on lg and wider screens hide on screens smaller than lg
2hide on lg and wider screens hide on screens smaller than lg
3hide on lg and wider screens hide on screens smaller than lg
4hide on lg and wider screens hide on screens smaller than lg
5hide on lg and wider screens hide on screens smaller than lg
6hide on lg and wider screens hide on screens smaller than lg
7hide on lg and wider screens hide on screens smaller than lg
Các giá trị hiển thị có thể được thay đổi bằng cách thay đổi biến
hide on lg and wider screens
hide on screens smaller than lg
8 và biên dịch lại SCSS.Các truy vấn phương tiện ảnh hưởng đến chiều rộng màn hình với điểm dừng đã cho hoặc lớn hơn. Ví dụ:
hide on lg and wider screens
hide on screens smaller than lg
9 đặt Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
0 trên màn hình d-block
d-block
5, d-block
d-block
6 và xxl
.Ví dụ
d-inline
d-inline
d-blockd-block d-block
d-block
d-block
Các yếu tố ẩn
Để phát triển thân thiện với thiết bị di động nhanh hơn, hãy sử dụng các lớp hiển thị đáp ứng để hiển thị và ẩn các yếu tố theo thiết bị. 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, thay vào đó ẩn các yếu tố có trách nhiệm cho từng kích thước màn hình.
Để ẩn các yếu tố chỉ cần sử dụng lớp
Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
4 hoặc một trong các lớp Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
5 cho bất kỳ biến thể màn hình phản hồi nào.Để chỉ hiển thị một phần tử trên một khoảng thời gian nhất định có kích thước màn hình, bạn có thể kết hợp một lớp
Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
6 với lớp Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
7, ví dụ Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
8 sẽ ẩn phần tử cho tất cả các kích thước màn hình ngoại trừ trên các thiết bị trung bình và lớn.Ẩn trên tất cả | 4 |
Chỉ ẩn trên xs | 0 |
Chỉ ẩn trên SM | 1 |
Chỉ ẩn trên MD | 2 |
Chỉ ẩn trên LG | 3 |
Chỉ ẩn trên XL | 4 |
Chỉ ẩn trên xxl | 5 |
Có thể nhìn thấy trên tất cả | 6 |
Chỉ nhìn thấy trên xs | 7 |
Chỉ có thể nhìn thấy trên SM | 8 |
Chỉ có thể nhìn thấy trên MD | 9 |
Chỉ nhìn thấy trên LG | display 0 |
Chỉ nhìn thấy trên XL | display 1 |
Chỉ nhìn thấy trên xxl | display 2 |
Ẩn trên LG và màn hình rộng hơn
Ẩn trên màn hình nhỏ hơn LG
hide on lg and wider screens
hide on screens smaller than lg
Hiển thị in
Thay đổi giá trị display
của các phần tử khi in với các lớp tiện ích hiển thị in của chúng tôi. Bao gồm hỗ trợ cho cùng các giá trị display
như các tiện ích display
5 đáp ứng của chúng tôi.
display
6display
7display
8display
9display
0display
1display
2display
3display
4display
5
Các lớp in và hiển thị có thể được kết hợp.
Chỉ có màn hình [chỉ ẩn trên in]
Chỉ in [chỉ ẩn trên màn hình]
Ẩn lớn trên màn hình, nhưng luôn hiển thị trên bản in
Screen Only [Hide on print only]
Print Only [Hide on screen only]
Hide up to large on screen, but always show on print
Sass
API tiện ích
Các tiện ích hiển thị được khai báo trong API tiện ích của chúng tôi trong display
6. Tìm hiểu cách sử dụng API Tiện ích.
"display": [
responsive: true,
print: true,
property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none
],