Bootstrap - Khe hở: Vũ khí bí mật cho khoảng cách hoàn hảo
Xin chào các ngôi sao tương lai của thiết kế web! ? Tôi rất vui mừng được hướng dẫn các bạn trên hành trình thú vị qua thế giới của Bootstrap gutters. Là người đã dạy khoa học máy tính trong nhiều năm hơn tôi muốn thừa nhận (hãy nói là tôi nhớ khi "thiết kế responsive" có nghĩa là nói to hơn với học sinh không phản hồi ?), tôi không thể chờ đợi để chia sẻ khái niệm thay đổi cuộc chơi này với các bạn.
Khe hở là gì?
Trước khi chúng ta đi sâu vào, hãy bắt đầu với những điều cơ bản. Trong thế giới thiết kế web, khe hở là khoảng cách giữa các cột trong bố cục của bạn. Chúng giống như không gian thở giúp nội dung của bạn không cảm thấy chật chội. Hãy nghĩ của chúng như khoảng cách礼貌 giữa người với người trong thang máy - cần thiết cho sự thoải mái, nhưng không quá rộng đến mức bạn phải gọi to qua cabin!
Bây giờ, hãy khám phá cách Bootstrap làm cho việc làm việc với khe hở trở nên dễ dàng.
Cách hoạt động
Hệ thống khe hở của Bootstrap được xây dựng dựa trên một số nguyên tắc quan trọng:
- Khe hở được tạo ra bằng cách sử dụng padding ngang.
- Các hàng có margin âm để căn chỉnh nội dung của các cột.
- Các cột có padding dương để tạo ra không gian giữa chúng.
Hãy xem một ví dụ đơn giản:
<div class="container">
<div class="row">
<div class="col">Cột 1</div>
<div class="col">Cột 2</div>
<div class="col">Cột 3</div>
</div>
</div>Trong cấu hình này, Bootstrap tự động thêm khe hở giữa các cột. Đó như phép thuật, nhưng tốt hơn vì chúng ta thực sự hiểu cách nó hoạt động!
Khe hở ngang
Bây giờ, hãy thử tay với một số khe hở ngang. Bootstrap cung cấp cho chúng ta các lớp để kiểm soát độ rộng của khe hở. Các lớp theo mẫu gx-*, nơi * là một số từ 0 đến 5.
<div class="container">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
</div>
</div>Trong ví dụ này, gx-5 tạo ra khe hở ngang rộng hơn. Nó giống như cho nội dung của bạn thêm không gian tại bàn ăn. Bạn có thể điều chỉnh giá trị này để tìm ra sự cân bằng hoàn hảo cho thiết kế của mình.
Sử dụng tính năng tràn
Đôi khi, bạn muốn khe hở của mình vượt ra khỏi ranh giới của container. Bootstrap có thể giúp bạn với lớp overflow-hidden:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
</div>
</div>Mẹo này đảm bảo rằng khe hở của bạn trông nhất quán, ngay cả ở mép của container. Nó giống như đảm bảo rằng khăn trải bàn treo đều ở tất cả các bên!
Khe hở dọc
Khoảng cách ngang là tuyệt vời, nhưng còn khoảng cách dọc thì sao? Hãy gặp lớp gy-*:
<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
</div>
</div>Ở đây, gy-5 thêm khoảng cách dọc giữa các hàng. Nó hoàn hảo cho việc tạo ra một lưới thẻ hoặc hình ảnh với khoảng cách đều.
Khe hở ngang và dọc
Muốn có cả hai? Bạn có thể kết hợp khe hở ngang và dọc:
<div class="container">
<div class="row g-5">
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Padding cột tùy chỉnh</div>
</div>
</div>
</div>Lớp g-5 là viết tắt cho cả gx-5 và gy-5. Nó giống như thêm gia vị hoàn hảo cho khoảng cách ngang và dọc trong thiết kế của bạn!
Khe hở trên các cột hàng
Bootstrap cũng cho phép bạn đặt khe hở trên các cột hàng. Điều này đặc biệt hữu ích khi bạn làm việc với số lượng cột thay đổi:
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Cột hàng</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Cột hàng</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Cột hàng</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Cột hàng</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Cột hàng</div>
</div>
</div>
</div>Ví dụ này tạo ra một bố cục responsive với các kích thước khe hở khác nhau cho các kích thước màn hình khác nhau. Nó giống như có một bố cục thích nghi với môi trường, tương tự như cách bạn sẽ sắp xếp nội thất khác nhau trong một căn hộ nhỏ so với một ngôi nhà rộng rãi!
Không có khe hở
Đôi khi, bạn có thể muốn loại bỏ khe hở hoàn toàn. Bootstrap làm điều này dễ dàng với lớp g-0:
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>Điều này tạo ra một bố cục liền mạch mà không có bất kỳ khoảng cách nào giữa các cột. Nó hoàn hảo cho việc tạo ra thiết kế mép đến mép hoặc khi bạn cần nội dung của mình chảy liên tục mà không bị gián đoạn.
Bảng快捷方式 phương pháp khe hở
Dưới đây là bảng tóm tắt tất cả các phương pháp khe hở mà chúng ta đã xem xét:
| Phương pháp | Lớp | Mô tả |
|---|---|---|
| Khe hở ngang | gx-* |
Thêm khoảng cách ngang giữa các cột |
| Khe hở dọc | gy-* |
Thêm khoảng cách dọc giữa các hàng |
| Cả hai hướng | g-* |
Thêm cả khoảng cách ngang và dọc |
| Không có khe hở | g-0 |
Loại bỏ tất cả các khe hở |
| Khe hở responsive |
g-lg-*, gx-md-*, v.v. |
Áp dụng khe hở tại các điểm breakpoint cụ thể |
| Tràn ẩn | overflow-hidden |
Ngăn không cho khe hở tạo ra thanh cuộn ngang |
Và thế là xong, các bạn! Bây giờ bạn đã được trang bị kiến thức để manipulates không gian trong các bố cục Bootstrap như một chuyên gia. Nhớ rằng, thiết kế tuyệt vời thường liên quan đến khoảng cách giữa các yếu tố cũng như các yếu tố本身的. Vậy hãy tiếp tục thực hành, 保持好奇心, và đừng ngần ngại thử nghiệm với các kích thước khe hở khác nhau. Bố cục hoàn hảo của bạn chỉ cách bạn một vài lớp!
Khi kết thúc, tôi nhớ lại một học sinh từng nói với tôi rằng học về khe hở đã giúp anh ấy nhìn thấy thiết kế web theo một ánh sáng mới. Anh ấy nói, "Giống như tôi đã chơi Tetris suốt thời gian này, và bây giờ tôi đã phát hiện ra rằng tôi có thể điều chỉnh khoảng cách giữa các mảnh!" ?
Tiếp tục thực hành, 保持好奇心, và đừng ngần ngại thử nghiệm với các kích thước khe hở khác nhau. Bố cục hoàn hảo của bạn chỉ cách bạn một vài lớp!
Credits: Image by storyset