Bootstrap - Cột: Xây dựng Bố cục T响应 Dễ Dàng

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những tính năng mạnh mẽ nhất của Bootstrap: cột. Là giáo viên máy tính của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. tin tôi đi, đến cuối bài hướng dẫn này, bạn sẽ có khả năng tạo ra các bố cục响应 như một chuyên gia!

Cách hoạt động

Trước khi chúng ta đi vào chi tiết, hãy hiểu alap. Hệ thống lưới của Bootstrap dựa trên bố cục 12 cột. Hãy tưởng tượng việc chia một chiếc pizza thành 12 miếng - bạn có thể ăn hết một mình (một cột toàn bộ) hoặc chia sẻ với bạn bè (nhiều cột).

Dưới đây là một ví dụ đơn giản để bắt đầu:

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

Trong ví dụ này, chúng ta đã tạo ra ba cột có độ rộng bằng nhau trên màn hình nhỏ và lớn hơn. Class col-sm-4 có nghĩa là "chiếm 4 trên 12 cột trên màn hình nhỏ". Điều này tương tự như nói, "Tôi muốn 4 miếng trong chiếc pizza 12 miếng, xin đừng误会!"

Căn chỉnh

Bây giờ chúng ta đã có các cột, hãy học cách căn chỉnh chúng. Điều này giống như việc sắp xếp nội thất trong một căn phòng - bạn muốn mọi thứ trông đẹp mắt!

Căn chỉnh dọc

Để căn chỉnh các cột dọc, chúng ta sử dụng các class trên hàng:

<div class="container">
<div class="row align-items-start">
<div class="col">Trên</div>
<div class="col">Trên</div>
<div class="col">Trên</div>
</div>
<div class="row align-items-center">
<div class="col">Giữa</div>
<div class="col">Giữa</div>
<div class="col">Giữa</div>
</div>
<div class="row align-items-end">
<div class="col">Dưới</div>
<div class="col">Dưới</div>
<div class="col">Dưới</div>
</div>
</div>

Ở đây, chúng ta sử dụng align-items-start, align-items-center, và align-items-end để căn chỉnh các cột lên trên, giữa và dưới hàng tương ứng.

Căn chỉnh ngang

Để căn chỉnh ngang, chúng ta sử dụng các class justify-content:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Một</div>
<div class="col-4">Hai</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Một</div>
<div class="col-4">Hai</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Một</div>
<div class="col-4">Hai</div>
</div>
</div>

Các class (justify-content-start, justify-content-center, justify-content-end) căn chỉnh các cột bên trái, giữa và bên phải của container.

Cuộn cột

Đôi khi, bạn có thể có nhiều hơn 12 đơn vị cột trong một hàng. Đừng lo lắng, Bootstrap sẽ tự động cuộn các cột thừa sang dòng mới:

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

Trong ví dụ này, 9 + 4 = 13, vượt quá 12, vì vậy cột thứ hai sẽ cuộn sang dòng mới.

Ngắt cột

Nhưng giả sử bạn muốn tự mình ép một dòng mới? Hãy gặp column break:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

The <div class="w-100"></div> tạo ra một ngắt 100%宽度, ép các cột tiếp theo bắt đầu từ dòng mới.

Đảo thứ tự

Class thứ tự

Bootstrap cho phép bạn thay đổi thứ tự thị giác của các cột:

<div class="container">
<div class="row">
<div class="col order-3">Đầu tiên, nhưng cuối cùng</div>
<div class="col order-2">Thứ hai, nhưng thứ hai</div>
<div class="col order-1">Thứ ba, nhưng đầu tiên</div>
</div>
</div>

Các class order- xác định thứ tự của các cột. Điều này giống như bảo các cột chơi trò ghế dựa!

Căn lề cột

Class căn lề

Đôi khi, bạn có thể muốn thêm một khoảng trống trước một cột. Đó là lúc các class căn lề được sử dụng:

<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 offset-md-4 thêm một margin-left tương đương với 4 cột, đẩy cột thứ hai sang phải.

Xóa浮动 cột tại các điểm breakpoint响应

Khi bố cục của bạn thay đổi qua các kích thước màn hình khác nhau, bạn có thể cần phải xóa浮动 các cột:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Ở đây, d-none d-md-block ẩn ngắt trên màn hình nhỏ nhưng hiển thị trên màn hình trung bình và lớn hơn.

Tiện ích margin

Bootstrap cung cấp các tiện ích margin cho việc điều chỉnh khoảng cách nhanh chóng:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

Class ml-auto đẩy cột thứ hai sang phải bằng cách điều chỉnh margin trái tự động.

Class cột độc lập

Cuối cùng, bạn có thể sử dụng các class cột mà không cần wrapper hàng để có thêm灵活性:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: độ rộng 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: độ rộng 75% trên breakpoint sm
</div>
</div>

Phương pháp này cho bạn nhiều quyền kiểm soát hơn đối với bố cục, đặc biệt là cho các thiết kế phức tạp.

Và thế là bạn đã học được tất tần tật về cột của Bootstrap! Hãy nhớ, thực hành làm nên完美, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Sớm thôi, bạn sẽ tạo ra các bố cục响应 làm cho cả những nhà phát triển web lâu năm cũng phải ghen tị!

Dưới đây là bảng tham khảo nhanh các class cột chúng ta đã covered:

Class	Mô tả
col-*	Class cột cơ bản (* có thể là 1-12)
col-sm-*	Cột cho màn hình nhỏ và lớn hơn
col-md-*	Cột cho màn hình trung bình và lớn hơn
col-lg-*	Cột cho màn hình lớn và lớn hơn
col-xl-*	Cột cho màn hình extra lớn
offset--	Cột offset (* có thể là sm, md, lg, xl)
order-*	Đảo thứ tự cột (* có thể là 1-12)

Chúc các bạn lập trình vui vẻ, và hy vọng rằng các bố cục của bạn luôn响应!

Credits: Image by storyset