Bootstrap 5 điều chỉnh khả năng hiển thị của phần tử mà không thay đổi nội dung hiển thị. Đặt mức độ hiển thị của một phần tử bằng các tiện ích hiển thị trang web của chúng tôi. Các tiện ích hiển thị không thay đổi giá trị hiển thị và ẩn thông tin đối với hầu hết người dùng trong khi giữ lại thông tin đó cho trình đọc màn hình. Nó giúp xuất hiện và biến mất nội dung cần thiết theo định dạng
Bootstrap 5 sử dụng lớp “có thể nhìn thấy” hoặc “không nhìn thấy được” cho khả năng hiển thị. Lớp “hiển thị” hiển thị nội dung và lớp “tàng hình” ẩn nội dung cần thiết
Khả năng hiển thị được sử dụng
- hiện rõ. Lớp hiển thị hiển thị dữ liệu hoặc dữ liệu hiển thị trên trang web. Hiển thị theo mặc định được đặt tại ứng dụng web
- vô hình. Lớp này được sử dụng để ẩn hoặc biến mất nội dung của ứng dụng
cú pháp
// Visible content of the web pagecontent.// Invisible content of the web pagecontent.
ví dụ 1. Dưới đây là một ví dụ về lớp có thể nhìn thấy của Bootstrap 5. Đó là cài đặt mặc định trên nội dung hiển thị
HTML
________số 8
2______2
>
2______2>
4 "en"
8=
>
7>
>
9
0
>
2=
5>
4>
>
2______2
7
8
7>
2
=
5"en"
7>
2______2
"en"
7 "en"
8=
00
>
>
2______204
"en"
8=
07
>
>
9____110
>
912
>
914
>
916
>
918
>
920
>
922
>
2____5504
>
2
=
5"en"
7>
________số 8
_______55____63____7
________số 8
=
5html
>
đầu ra
Bootstrap 5 Khả năng hiển thị
ví dụ 2. Dưới đây là một ví dụ về lớp Bootstrap 5 vô hình. Nội dung không hiển thị trên trang web nhưng có trên trang Html.
Khả năng hiển thị của các phần tử trong bootstrap với các ví dụ
Cải thiện bài viết
Lưu bài viết
Thích bài viết
- Độ khó. Trung bình
- Cập nhật lần cuối. 22 tháng 9 năm 2021
Cải thiện bài viết
Lưu bài viết
Có một số trường hợp cần ẩn một số nội dung trên trang web mà không ảnh hưởng đến bố cục của trang. Bootstrap sử dụng thuộc tính khả năng hiển thị của CSS và cung cấp hai lớp có thể nhìn thấy và không nhìn thấy được để kiểm soát khả năng hiển thị của một phần tử trên trang web.
Các lớp này không ảnh hưởng đến bố cục. e. các phần tử vô hình sẽ vẫn chiếm không gian trong bố cục. Nội dung sẽ bị ẩn cả về mặt trực quan và đối với trình đọc màn hình.
lớp vô hình
Lớp bootstrap này dùng để ẩn phần tử khỏi trang. Trong chương trình dưới đây, tiêu đề h2 “Hướng dẫn Bootstrap” được ẩn bằng cách sử dụng lớp này. Về cơ bản, lớp này sử dụng thuộc tính khả năng hiển thị của CSS và đặt giá trị của nó thành ẩn. Mặc dù tiêu đề Hướng dẫn Bootstrap ẩn đi nhưng nó vẫn chiếm dung lượng trong bố cục.
HTML
3
>
4html
0>
6
>
7__>
8html
00______2
>
2 >
3html
0>
5>
>
7______2>
2 >
3____30462
>
464
465
466
465
3
html
07
html
5448
>
html
5html
>
Đầu ra.
lớp hiển thị
Lớp bootstrap này được sử dụng để hiện phần tử ẩn khỏi trang. Trong chương trình bên dưới, tiêu đề h2 “Hướng dẫn Bootstrap” được hiển thị bằng cách sử dụng lớp này. Về cơ bản, lớp này sử dụng thuộc tính khả năng hiển thị của CSS và đặt giá trị của nó thành hiển thị.
Lớp hiển thị không có tác dụng trong ví dụ bên dưới vì các phần tử được hiển thị theo mặc định, nhưng lớp này có thể hữu ích khi một phần tử ẩn trước đó được hiển thị. lập trình.
HTML
4
html
0>
6
>
0______78html
0
46______2
html
544
>
>
0______2>
2 >
3html
0>
5>
>
7______2>
2 >
3____30462
>
464
465
html
06
465
3
html
0html
12
>
7
>
7
2
>
html
5448
>
html
5html
>
Đầu ra.
Điểm quan trọng.
- Các lớp Bootstrap có thể nhìn thấy và không nhìn thấy được sử dụng thuộc tính khả năng hiển thị của CSS để ẩn và bỏ ẩn các phần tử
- Các phần tử bị ẩn sẽ vẫn chiếm dung lượng trên bố cục. Lớp này chỉ ẩn và phần tử và không xóa nó
- Các lớp này không ảnh hưởng hoặc sử dụng thuộc tính hiển thị của CSS theo bất kỳ cách nào để ẩn hoặc bỏ ẩn các phần tử
Tham khảo. https. //getbootstrap. com/docs/4. 1/utilities/visibility/
Ghi chú cá nhân của tôi arrow_drop_up
Tiết kiệm