Bootstrap - CSS Lưới: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture nhà phát triển web! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của hệ thống Lưới CSS của Bootstrap. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn trong hành trình thú vị này. Nào, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu!

Cách hoạt động

Hệ thống Lưới CSS của Bootstrap giống như một công cụ布置神奇 giúp chúng ta tổ chức nội dung trên các trang web. Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng - đó chính xác là những gì chúng ta đang làm, nhưng với các yếu tố trang web!

Hệ thống lưới dựa trên một bố cục 12 cột, có nghĩa là chúng ta có thể chia trang của mình thành 12 phần bằng nhau. Điều này mang lại cho chúng ta sự linh hoạt vô cùng trong việc thiết kế các bố cục. Hãy cùng xem một ví dụ đơn giản:

<div class="container">
<div class="row">
<div class="col-4">Cột 1</div>
<div class="col-4">Cột 2</div>
<div class="col-4">Cột 3</div>
</div>
</div>

Trong ví dụ này, chúng ta đã tạo ra ba cột bằng nhau, mỗi cột chiếm 4 phần của lưới 12 cột (4 + 4 + 4 = 12). Nó giống như cắt một miếng pizza thành ba phần bằng nhau!

Khác biệt chính

Hiện tại, bạn có thể đang tự hỏi, " Điều gì làm cho hệ thống Lưới CSS của Bootstrap đặc biệt? " Well, để tôi nói cho bạn biết - tất cả đều về sự đơn giản và mạnh mẽ. Không giống như các bố cục CSS truyền thống, hệ thống lưới của Bootstrap:

1. Sử dụng flexbox, làm cho nó linh hoạt và phản hồi hơn
2. Cung cấp các lớp dễ sử dụng để tạo bố cục nhanh chóng
3. Cung cấp khả năng phản hồi内置 cho các kích thước màn hình khác nhau

Ba cột

Hãy tạo một bố cục thú vị hơn với ba cột có kích thước khác nhau:

<div class="container">
<div class="row">
<div class="col-3">Bên cột</div>
<div class="col-6">Nội dung chính</div>
<div class="col-3">Bảng điều khiển bên phải</div>
</div>
</div>

Trong ví dụ này, chúng ta có một bên cột và bảng điều khiển bên phải (cả hai đều chiếm 3 cột) với một khu vực nội dung chính lớn hơn ở giữa (6 cột). Nó giống như có một chiếc TV lớn ở giữa tường phòng khách, với két sách ở hai bên!

Phản hồi

Một trong những điều thú vị nhất về hệ thống lưới của Bootstrap là khả năng phản hồi. Chúng ta có thể làm cho bố cục của mình adapt để các kích thước màn hình khác nhau một cách dễ dàng. Hãy cùng xem cách:

<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Cột 1</div>
<div class="col-12 col-md-6 col-lg-4">Cột 2</div>
<div class="col-12 col-md-12 col-lg-4">Cột 3</div>
</div>
</div>

Bố cục này sẽ chồng vertical trên màn hình nhỏ, trở thành hai cột trên màn hình trung bình, và ba cột trên màn hình lớn. Nó giống như có một website có khả năng biến hình!

Ví dụ

Hãy tạo một bố cục blog đơn giản và phản hồi:

<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<h1>Bài viết blog tuyệt vời của tôi</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-12 col-lg-4">
<h2>Bài viết gần đây</h2>
<ul>
<li>Bài viết 1</li>
<li>Bài viết 2</li>
<li>Bài viết 3</li>
</ul>
</div>
</div>
</div>

Bố cục này sẽ có nội dung chính và bên cột chồng lên nhau trên màn hình nhỏ, nhưng bên cạnh nhau trên màn hình lớn. Nó giống như một cuốn sách có thể sắp xếp lại các trang tùy thuộc vào cách bạn cầm nó!

Cuộn

Đôi khi, chúng ta muốn nội dung của mình cuộn xuống dòng tiếp theo khi nó vượt quá chiều rộng của lưới. Bootstrap làm điều này rất dễ dàng:

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Columns continue along the new line.</div>
</div>
</div>

Ví dụ này cho thấy các cột tự động cuộn khi chúng vượt quá giới hạn 12 cột. Nó giống như chơi Tetris với bố cục của bạn!

Bắt đầu

Chúng ta cũng có thể kiểm soát vị trí bắt đầu của các cột trong lưới:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>

Các lớp offset-* cho phép chúng ta di chuyển các cột sang phải. Nó giống như cho nội dung của bạn một bước nhảy đầu tiên trong cuộc đua!

Cột tự động

Bootstrap cũng cho phép các cột có kích thước linh hoạt, tự động:

<div class="container">
<div class="row">
<div class="col">1 của 3</div>
<div class="col-6">2 của 3 (rộng hơn)</div>
<div class="col">3 của 3</div>
</div>
</div>

Ở đây, hai cột đầu tiên và cuối cùng sẽ tự động điều chỉnh kích thước xung quanh cột giữa. Nó giống như có nội thất thông minh điều chỉnh để phù hợp với không gian!

Nesting

Chúng ta thậm chí có thể đặt các lưới trong lưới để tạo ra các bố cục phức tạp hơn:

<div class="container">
<div class="row">
<div class="col-sm-9">
Cấp 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Cấp 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Cấp 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Điều này tạo ra một lưới trong lưới, cho phép các bố cục phức tạp. Nó giống như có phòng trong phòng trong nhà của bạn!

Tùy chỉnh

Hệ thống lưới của Bootstrap rất linh hoạt. Bạn có thể điều chỉnh số lượng cột, khoảng cách giữa các cột và các điểm breakpoint để phù hợp với nhu cầu của bạn. Dưới đây là một ví dụ về cách tùy chỉnh lưới bằng Sass:

$grid-columns: 15;
$grid-gutter-width: 20px;

@import "bootstrap/scss/bootstrap";

Điều này thay đổi lưới mặc định 12 cột thành lưới 15 cột và điều chỉnh khoảng cách giữa các cột. Nó giống như là kiến trúc sư của chính thành phố số của bạn!

Khoảng cách

Bootstrap 5 giới thiệu khái niệm khoảng cách, cho phép bạn kiểm soát khoảng cách giữa các cột:

<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>

Lớp gy-5 thêm khoảng cách dọc giữa các hàng. Nó giống như thêm không gian thở giữa các yếu tố trong bố cục của bạn!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của hệ thống Lưới CSS của Bootstrap. Từ các bố cục cơ bản đến các thiết kế phản hồi, nesting và tùy chỉnh, bạn现在已经 có quyền lực để tạo ra các bố cục tuyệt vời cho các dự án web của mình.

Nhớ rằng, thực hành làm nên hoàn hảo. Vậy hãy thử nghiệm với các khái niệm này, và sớm bạn sẽ tạo ra các bố cục như một chuyên gia! Chúc các bạn may mắn và mong rằng các lưới của bạn luôn được căn chỉnh hoàn hảo! ?

Credits: Image by storyset