Bootstrap - Định cỡ: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới đầy thú vị của Bootstrap sizing. Là người thầy thân thiện trong khu phố máy tính, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những基础知识 và dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu nhé!

Bootstrap Sizing là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu Bootstrap sizing là gì. Hãy tưởng tượng bạn đang trang trí một căn phòng. Bạn muốn một số món đồ nội thất phù hợp hoàn hảo, một số chiếm một nửa không gian, và những món đồ khác điều chỉnh dựa trên kích thước của căn phòng. Đó chính xác là điều Bootstrap sizing giúp chúng ta làm với các yếu tố trên trang web!

Tương đối với Phụ huynh

Hãy bắt đầu với việc định cỡ các yếu tố tương đối với phụ huynh của chúng. Điều này giống như quyết định một bức tranh nên chiếm bao nhiêu không gian trên tường.

Lớp Width

Bootstrap cung cấp các lớp cho phép bạn đặt độ rộng của một yếu tố là một phần trăm của độ rộng của phụ huynh của nó. Dưới đây là bảng các lớp này:

Lớp	Mô tả
w-25	Độ rộng 25%
w-50	Độ rộng 50%
w-75	Độ rộng 75%
w-100	Độ rộng 100%
w-auto	Độ rộng tự động

Hãy xem chúng trong hành động:

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Độ rộng 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">Độ rộng 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">Độ rộng 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">Độ rộng 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">Độ rộng tự động</div>
</div>

Trong ví dụ này, chúng ta đang tạo năm div elements, mỗi cái có một lớp độ rộng khác nhau. Lớp p-3 thêm một chút padding để dễ quan sát. Bạn sẽ thấy rằng mỗi div chiếm một phần trăm khác nhau của độ rộng của container phụ huynh.

Lớp Height

Tương tự, Bootstrap cũng cung cấp các lớp để đặt chiều cao:

Lớp	Mô tả
h-25	Chiều cao 25%
h-50	Chiều cao 50%
h-75	Chiều cao 75%
h-100	Chiều cao 100%
h-auto	Chiều cao tự động

Dưới đây là cách bạn có thể sử dụng chúng:

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Chiều cao 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Chiều cao 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Chiều cao 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Chiều cao 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Chiều cao tự động</div>
</div>

Trong ví dụ này, chúng ta đặt một chiều cao cố định cho container phụ huynh và sau đó sử dụng các lớp chiều cao trên các yếu tố con. Lớp d-inline-block làm cho các div này hiển thị inline.

Tương đối với Độ rộng

Bây giờ, hãy nói về việc định cỡ các yếu tố tương đối với độ rộng của viewport. Điều này giống như điều chỉnh màn hình TV để phù hợp với kích thước khác nhau của các căn phòng.

Bootstrap sử dụng đơn vị vw, có nghĩa là "viewport width". Dưới đây là một số lớp:

Lớp	Mô tả
vw-100	Độ rộng 100vw
min-vw-100	Độ rộng tối thiểu 100vw
max-vw-100	Độ rộng tối đa 100vw

Hãy xem một ví dụ:

<div class="vw-100" style="background-color: #eee;">Div này có độ rộng bằng 100vw.</div>

Div này sẽ luôn có độ rộng bằng viewport, ngay cả khi bạn thay đổi kích thước cửa sổ trình duyệt.

Tương đối với Chiều cao

Tương tự như viewport width, chúng ta cũng có thể định cỡ các yếu tố tương đối với chiều cao của viewport sử dụng đơn vị vh.

Lớp	Mô tả
vh-100	Chiều cao 100vh
min-vh-100	Chiều cao tối thiểu 100vh
max-vh-100	Chiều cao tối đa 100vh

Dưới đây là cách bạn có thể sử dụng này:

<div class="vh-100" style="background-color: #eee;">Div này có chiều cao bằng 100vh.</div>

Div này sẽ luôn có chiều cao bằng viewport, điều chỉnh khi bạn thay đổi kích thước cửa sổ trình duyệt.

Tương đối với Viewport

Cuối cùng, hãy xem xét việc định cỡ tương đối với cả độ rộng và chiều cao của viewport.

Độ rộng tối thiểu 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

Div này sẽ rộng ít nhất bằng viewport, nhưng có thể mở rộng nếu nội dung yêu cầu nhiều không gian hơn.

Chiều cao tối thiểu 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

Tương tự, div này sẽ cao ít nhất bằng viewport, nhưng có thể mở rộng nếu cần thiết.

Kết hợp tất cả

Bây giờ chúng ta đã bao gồm tất cả các tùy chọn định cỡ, hãy tạo một ví dụ nhỏ để kết hợp chúng:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Tôi chiếm 75% độ rộng tương đối với phụ huynh của tôi!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Tôi chiếm 50% chiều cao tương đối với phụ huynh của tôi!
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
Tôi rộng bằng viewport!
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
Tôi cao bằng một nửa viewport!
</div>
</div>
</div>
</div>

Trong ví dụ này, chúng ta sử dụng sự kết hợp của độ rộng, chiều cao và định cỡ tương đối với viewport để tạo một bố cục đa dạng và linh hoạt. Hãy thử thay đổi kích thước cửa sổ trình duyệt để xem các yếu tố này điều chỉnh như thế nào!

Và thế là xong, các bạn! Bạn đã chính thức bước vào thế giới của Bootstrap sizing. Nhớ rằng, thực hành là chìa khóa để thành thạo, vì vậy đừng ngại thử nghiệm các lớp này trong các dự án của riêng bạn. Trước khi bạn nhận ra, bạn sẽ tạo ra các bố cục linh hoạt như một chuyên gia!

Chúc các bạn lập trình vui vẻ, và hy vọng các trang web của bạn luôn phù hợp hoàn hảo! ?

Credits: Image by storyset