Mục lục
Hướng dẫn và ví dụ tiện ích Bootstrap Visibility
Xem thêm các chuyên mục:
Nhóm phát triển của chúng tôi vừa ra mắt website
langlearning.net
học tiếng
Anh,
Nga,
Đức,
Pháp,
Việt,
Trung,
Hàn,
Nhật,
...
miễn phí cho tất cả mọi người.Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Trong CSS có 2 cách để bạn ẩn một phần tử:
- Sử dụng CSS Property: {display: none}.
- Sử dụng CSS Property: {visibility: hidden}.
Bây giờ tôi sẽ giải thích sự khác biệt giữa 2 cách trên.
{display: none}
{display: none} sẽ làm ẩn phần tử, đồng thời giải phóng vùng không gian mà phần tử đã chiếm chỗ. Điều đó có nghĩa là sau khi phần tử bị ẩn đi, các phần tử khác có thể chiếm vùng không gian của nó.
{visibility: hidden}
{visibility: hidden} sẽ làm ẩn phần tử, nhưng nó không giải phóng vùng không gian mà phần tử đã chiếm.
Nếu phần tử đã bị ẩn bởi {visibility: hidden} thì để nó hiển thị trở lại bạn phải sử dụng {visibility: visible}.
Bootstrap Visibility
Thay vì sử dụng CSS {visibility: hidden} & {visibility: visible}, Bootstrap cung cấp cho bạn 2 lớp .invisible & .visible:
.visible, .invisible
// Class
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
