Bootstrap - Hiển thị: Làm cho các Element Xuất hiện vàDisappear

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng tìm hiểu một chủ đề rất thú vị mà tôi thích gọi là "phép màu" của thiết kế web: các lớp hiển thị của Bootstrap. Giống như một phù thủy có thể làm các vật thể xuất hiện và biến mất, bạn sẽ học cách làm điều tương tự với các element trên web. Hãy bắt đầu nhé!

什么是Bootstrap Visibility?

Các lớp hiển thị của Bootstrap là một bộ công cụ mạnh mẽ cho phép bạn kiểm soát khi và cách các element được hiển thị trên trang web của bạn. Hãy tưởng tượng như bạn có một điều khiển từ xa cho nội dung trang web của mình, nơi bạn có thể quyết định điều gì sẽ hiển thị dựa trên các kích thước màn hình hoặc điều kiện khác nhau.

Tại sao nó lại quan trọng?

Hãy tưởng tượng bạn đang thiết kế một trang web trông rất đẹp trên máy tính để bàn, nhưng khi bạn mở nó trên điện thoại, mọi thứ đều bị nén và khó đọc. Đó là nơi các lớp hiển thị đến để cứu nguy! Chúng giúp bạn tạo ra các thiết kế responsive để phù hợp với các thiết bị khác nhau, đảm bảo trang web của bạn trông tuyệt vời ở mọi nơi.

Các Lớp Hiển thị Cơ bản

Hãy bắt đầu với các lớp hiển thị đơn giản nhất. Đây giống như các công tắc "bật/tắt" cho các element của bạn.

Lớp Visible

<div class="visible">Tôi luôn hiển thị!</div>

Element này sẽ hiển thị trên tất cả các thiết bị và kích thước màn hình. Nó giống như để đèn sáng suốt đêm - ai cũng có thể thấy nó!

Lớp Hidden

<div class="hidden">Bạn không thể thấy tôi!</div>

Element này bị ẩn trên tất cả các thiết bị. Nó giống như đặt một thứ vào một hộp vô hình - nó có trong mã của bạn, nhưng không ai có thể thấy nó trên trang.

Các Lớp Hiển thị Responsive

Bây giờ, hãy đi sâu hơn một chút. Bootstrap cho phép bạn hiển thị hoặc ẩn các element dựa trên kích thước màn hình. Nó giống như có các bộ quần áo khác nhau cho các dịp khác nhau!

Ẩn ở các Kích thước Màn hình Cụ thể

<div class="hidden-xs">Tôi bị ẩn trên màn hình extra small</div>
<div class="hidden-sm">Tôi bị ẩn trên màn hình small</div>
<div class="hidden-md">Tôi bị ẩn trên màn hình medium</div>
<div class="hidden-lg">Tôi bị ẩn trên màn hình large</div>

Các lớp này ẩn element trên các kích thước màn hình cụ thể:

• hidden-xs: Ẩn trên màn hình extra small (điện thoại)
• hidden-sm: Ẩn trên màn hình small (máy tính bảng)
• hidden-md: Ẩn trên màn hình medium (máy tính để bàn)
• hidden-lg: Ẩn trên màn hình large (máy tính để bàn lớn)

Hiển thị ở các Kích thước Màn hình Cụ thể

<div class="visible-xs">Tôi chỉ hiển thị trên màn hình extra small</div>
<div class="visible-sm">Tôi chỉ hiển thị trên màn hình small</div>
<div class="visible-md">Tôi chỉ hiển thị trên màn hình medium</div>
<div class="visible-lg">Tôi chỉ hiển thị trên màn hình large</div>

Các lớp này hiển thị element chỉ trên các kích thước màn hình cụ thể:

• visible-xs: Chỉ hiển thị trên màn hình extra small
• visible-sm: Chỉ hiển thị trên màn hình small
• visible-md: Chỉ hiển thị trên màn hình medium
• visible-lg: Chỉ hiển thị trên màn hình large

Hiển thị in

Bạn có biết bạn có thể kiểm soát điều gì xuất hiện khi ai đó in trang web của bạn? Nó giống như có một phiên bản đặc biệt của trang web của bạn chỉ cho giấy!

<div class="visible-print">Tôi chỉ xuất hiện khi bạn in!</div>
<div class="hidden-print">Tôi biến mất khi bạn in!</div>

• visible-print: Element này chỉ xuất hiện khi trang được in
• hidden-print: Element này bị ẩn khi trang được in

Kết hợp các Lớp Hiển thị

Đây là phần thú vị! Bạn có thể kết hợp các lớp này để tạo ra các quy tắc hiển thị phức tạp. Nó giống như làm DJ hiển thị, trộn lẫn và kết hợp để tạo ra cái nhìn hoàn hảo cho mọi tình huống.

<div class="visible-xs visible-md">
Tôi hiển thị trên điện thoại và máy tính để bàn cỡ trung bình, nhưng bị ẩn trên máy tính bảng và màn hình lớn!
</div>

Element này sẽ hiển thị trên extra small (điện thoại) và medium (máy tính để bàn), nhưng bị ẩn trên small (máy tính bảng) và large screens.

Các Ví dụ Thực tế

Hãy áp dụng kiến thức mới của chúng ta vào một số ví dụ thực tế!

Menu Navigation Responsive

<nav>
<ul class="hidden-xs">
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Liên hệ</li>
</ul>
<div class="visible-xs">
<button>Menu</button>
</div>
</nav>

Trong ví dụ này, chúng ta có một menu导航 đầy đủ cho các màn hình lớn hơn, nhưng nó được thay thế bằng một nút "Menu" trên điện thoại. Nó giống như có một phòng ăn sang trọng cho khách và một góc bếp ấm cúng cho sử dụng hàng ngày!

Nội dung T适应性

<article>
<h1>Chào mừng đến với Trang web của Tôi</h1>
<p class="visible-lg">Đây là mô tả chi tiết trông đẹp trên màn hình lớn.</p>
<p class="hidden-lg">Chào mừng! Nhấp để biết thêm thông tin.</p>
</article>

Ở đây, chúng ta hiển thị một mô tả chi tiết trên màn hình lớn, nhưng một phiên bản ngắn hơn trên các thiết bị nhỏ hơn. Nó giống như có cả một cuốn sách và phiên bản tóm tắt của nó!

Các Practices và Tips Tốt nhất

1. Đừng lạm dụng: Chỉ vì bạn có thể ẩn element không có nghĩa là bạn nên làm vậy. Luôn cân nhắc xem nội dung có thực sự cần thiết hay không.

2. Thiết kế mobile-first: Thiết kế cho màn hình nhỏ trước, sau đó thêm nội dung cho màn hình lớn hơn. Dễ dàng thêm vào hơn là bớt đi!

3. Kiểm tra, kiểm tra, kiểm tra: Luôn kiểm tra trang web của bạn trên các thiết bị khác nhau để đảm bảo các lớp hiển thị hoạt động như mong đợi.

4. Kết hợp với các tính năng khác của Bootstrap: Các lớp hiển thị hoạt động rất tốt với hệ thống lưới và các thành phần Bootstrap khác.

5. Quan tâm đến khả năng truy cập: Lưu ý rằng nội dung ẩn vẫn có thể được đọc bởi các trình đọc màn hình. Sử dụng các thuộc tính aria khi cần thiết.

Kết luận

Chúc mừng! Bạn đã vừa học cách trở thành một phù thủy hiển thị với Bootstrap. Với kỹ năng này, bạn có thể tạo ra các trang web adapt tuyệt vời cho bất kỳ kích thước màn hình nào. Nhớ rằng, thiết kế web tuyệt vời giống như một con rắn hổ mang - nó nên trông hoàn hảo trong bất kỳ môi trường nào.

Bây giờ là lượt bạn thực hành. Hãy thử tạo một trang web đơn giản và thử nghiệm với các lớp hiển thị này. Đừng sợ mắc lỗi - đó là cách chúng ta học! Và谁知道, có lẽ bạn sẽ phát hiện ra một cách sử dụng mới cho các lớp này mà ngay cả tôi cũng chưa nghĩ ra.

Chúc mừng bạn, và hy vọng các element của bạn luôn hiển thị (hoặc ẩn) chính xác khi bạn muốn!

Credits: Image by storyset