Bootstrap - Hiển thị: Hướng dẫn chi tiết cho người mới bắt đầu
Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những tính năng hữu ích nhất của Bootstrap: các tiện ích hiển thị (Display utilities). Là người dạy máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn qua chủ đề này với những giải thích rõ ràng và nhiều ví dụ. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và cùng bắt đầu nhé!
Bootstrap Display là gì?
Trước khi chúng ta đi vào chi tiết, hãy hiểu thế nào là "display" trong Bootstrap. Trong phát triển web, "display" đề cập đến cách một yếu tố được hiển thị trên trang web. Bootstrap cung cấp một bộ các lớp cho phép bạn dễ dàng kiểm soát hành vi hiển thị của các yếu tố.
Hãy tưởng tượng như sắp xếp nội thất trong một căn phòng. Đôi khi bạn muốn một món đồ có thể nhìn thấy, đôi khi bạn muốn giấu nó đi, và đôi khi bạn muốn nó hành xử khác nhau tùy thuộc vào kích thước của phòng (hoặc trong trường hợp của chúng ta, kích thước màn hình).
Ký hiệu
Bootstrap sử dụng một ký hiệu đơn giản và trực quan cho các lớp hiển thị. Định dạng chung là:
.d-{value}Trong đó {value} có thể là một trong những giá trị sau:
| Giá trị | Mô tả |
|---|---|
| none | Ẩn yếu tố |
| inline | Hiển thị yếu tố như một yếu tố inline |
| inline-block | Hiển thị yếu tố như một containner inline-level block |
| block | Hiển thị yếu tố như một block element |
| table | Hiển thị yếu tố như một bảng |
| table-cell | Hiển thị yếu tố như một ô bảng |
| table-row | Hiển thị yếu tố như một hàng bảng |
| flex | Hiển thị yếu tố như một containner block-level flex |
| inline-flex | Hiển thị yếu tố như một containner inline-level flex |
Hãy xem một số ví dụ:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>Trong ví dụ này, chúng ta sử dụng d-inline để làm cho hai div hiển thị inline. Chúng sẽ xuất hiện bên cạnh nhau thay vì chồng lên nhau.
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>Ở đây, chúng ta sử dụng d-block để làm cho các span (thường là inline) hiển thị như block. Chúng sẽ chồng lên nhau theo chiều dọc.
Biến thể响应式
Bây giờ, hãy đi vào phần thú vị! Bootstrap cho phép bạn áp dụng các thuộc tính hiển thị khác nhau tùy thuộc vào kích thước màn hình. Định dạng cho điều này là:
.d-{breakpoint}-{value}Trong đó {breakpoint} có thể là:
| Điểm ngắt | Mô tả |
|---|---|
| sm | Thiết bị nhỏ (≥576px) |
| md | Thiết bị trung bình (≥768px) |
| lg | Thiết bị lớn (≥992px) |
| xl | Thiết bị rất lớn (≥1200px) |
Ví dụ:
<div class="d-none d-md-block">
Văn bản này sẽ bị ẩn trên màn hình nhỏ nhưng sẽ hiển thị trên màn hình trung bình và lớn hơn.
</div>Thẻ div này sẽ bị ẩn (d-none) theo mặc định, nhưng sẽ hiển thị như block (d-md-block) trên màn hình trung bình và lớn hơn.
Ẩn các yếu tố
Việc ẩn các yếu tố là một nhiệm vụ phổ biến trong thiết kế响应式. Bootstrap làm cho điều này dễ dàng với lớp d-none:
<div class="d-none">Bạn không thể thấy tôi!</div>Yếu tố này sẽ hoàn toàn bị ẩn, không phụ thuộc vào kích thước màn hình.
Nhưng nếu bạn muốn ẩn một yếu tố chỉ trên một số kích thước màn hình nhất định? Đó là khi các biến thể响应式 trở nên hữu ích:
<div class="d-lg-none">Tôi chỉ hiển thị trên tất cả các màn hình nhỏ hơn lớn.</div>
<div class="d-none d-lg-block">Tôi chỉ xuất hiện trên màn hình lớn và lớn hơn.</div>Hiển thị trong khi in
Bootstrap thậm chí còn cho phép bạn kiểm soát cách các yếu tố hiển thị khi trang được in! Sử dụng các lớp d-print-{value} cho điều này:
<div class="d-none d-print-block">Tôi chỉ xuất hiện khi bạn in trang!</div>
<div class="d-print-none">Tôi biến mất khi bạn in trang!</div>Điều này đặc biệt hữu ích cho việc tạo các phiên bản in-friendly của trang web của bạn mà không cần sử dụng các stylesheet riêng biệt.
Kết hợp tất cả lại
Hãy tạo một ví dụ nhỏ sử dụng nhiều tiện ích hiển thị:
<div class="container">
<h1 class="d-none d-md-block">Chào mừng đến với trang web của tôi</h1>
<h2 class="d-md-none">Chào mừng</h2>
<p class="d-inline-block bg-light p-2">Tôi luôn là inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">Tôi xuất hiện inline trên màn hình lớn.</p>
<div class="d-flex justify-content-between">
<div>Phần tử Flex 1</div>
<div>Phần tử Flex 2</div>
<div class="d-none d-xl-block">Tôi chỉ hiển thị trên màn hình rất lớn</div>
</div>
<footer class="d-print-none">Chân trang này sẽ không xuất hiện khi in.</footer>
</div>Trong ví dụ này:
- Chúng ta có một tiêu đề lớn cho màn hình trung bình và lớn hơn, và một tiêu đề nhỏ hơn cho màn hình nhỏ.
- Chúng ta có hai đoạn văn bản, một trong số đó chỉ xuất hiện trên màn hình lớn.
- Chúng ta sử dụng flexbox, với một phần tử thứ ba chỉ xuất hiện trên màn hình rất lớn.
- Chân trang sẽ không được in.
Kết luận
Và thế là xong, các bạn! Chúng ta đã khám phá chi tiết các tiện ích hiển thị của Bootstrap. Nhớ rằng, chìa khóa để thành thạo chúng là thực hành. Hãy thử tạo layouts của riêng bạn, thử nghiệm với các kích thước màn hình khác nhau, và đừng ngần ngại kết hợp các lớp này.
Là người dạy máy tính cũ của bạn, tôi không thể nhấn mạnh đủ tầm quan trọng của các tiện ích này trong phát triển web thực tế. Chúng sẽ giúp bạn tiết kiệm hàng giờ viết CSS tùy chỉnh và gỡ lỗi các vấn đề layout.
Bây giờ, hãy tiến lên và tạo ra các layouts响应式, linh hoạt với tự tin! Và nhớ rằng, trong thế giới phát triển web, cũng như trong cuộc sống, đôi khi công cụ mạnh mẽ nhất là biết khi nào làm cho một thứ biến mất. Chúc các bạn lập trình vui vẻ!
Credits: Image by storyset