Mục lục

Hướng dẫn sử dụng tiện ích Bootstrap Visibility

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Boostrap Visibility

Trong CSS có 2 cách để bạn ẩn một phần tử:
  1. Sử dụng CSS Property: {display: none}.
  2. 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;
}

Xem thêm các chuyên mục: