Bootstrap - Điểm chuyển đổi: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn tương lai của các nhà phát triển web! Tôi rất vui mừng được bắt đầu hành trình này cùng các bạn khi chúng ta khám phá thế giới thú vị của các điểm chuyển đổi trong Bootstrap. Như một giáo viên máy tính gần gũi, tôi sẽ hướng dẫn các bạn từng bước, đảm bảo rằng các bạn hiểu rõ từng khái niệm. Vậy hãy lấy饮料 yêu thích của mình, thư giãn và cùng tôi bước vào!

Khái niệm cơ bản

Trước khi chúng ta bắt đầu nói về các điểm chuyển đổi, hãy dành một chút thời gian để hiểu tại sao chúng lại quan trọng. Hãy tưởng tượng bạn đang thiết kế một trang web trông rất đẹp trên máy tính để bàn của mình. Bạn cảm thấy rất tự hào cho đến khi bạn bè của bạn thử xem nó trên điện thoại di động vàSuddenly mọi thứ trở nên hỗn loạn! Đây là lúc các điểm chuyển đổi đến để cứu nguy.

Các điểm chuyển đổi là các độ rộng màn hình cụ thể kích hoạt sự thay đổi trong bố cục trang web của bạn. Chúng giúp trang web của bạn thích ứng với các kích thước màn hình khác nhau, đảm bảo rằng nó trông đẹp trên mọi thứ từ một chiếc điện thoại di động nhỏ đến một màn hình máy tính để bàn lớn. Đó giống như có một trang web chameleon thay đổi ngoại hình để phù hợp với môi trường của nó!

Các loại điểm chuyển đổi

Bootstrap, khung công tác CSS gần gũi của chúng ta, cung cấp cho chúng ta nhiều điểm chuyển đổi được xác định trước. Hãy cùng nhìn vào chúng:

Điểm chuyển đổi	Prefix lớp	Kích thước
Rất nhỏ	Không	<576px
Nhỏ	sm	≥576px
Trung bình	md	≥768px
Lớn	lg	≥992px
Rất lớn	xl	≥1200px
Rất rất lớn	xxl	≥1400px

Những điểm chuyển đổi này giống như các kích cỡ khác nhau của áo thun. Cũng như bạn không mặc áo XXL nếu bạn có kích cỡ S, bạn cũng không sử dụng điểm chuyển đổi 'xl' cho một màn hình nhỏ!

Media Queries

Bây giờ, hãy nói về sức mạnh kỳ diệu đằng sau các điểm chuyển đổi: media queries. Media queries là siêu năng lực của CSS cho phép bạn áp dụng các phong cách khác nhau dựa trên các đặc điểm của thiết bị, như chiều rộng hoặc chiều cao.

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

@media (min-width: 768px) {
.my-class {
font-size: 20px;
}
}

Mã này có nghĩa là, "Hey trình duyệt, khi màn hình rộng ít nhất 768px, đặt kích thước chữ của các phần tử có 'my-class' là 20 pixel." Đó giống như nói với trang web của bạn rằng mặc "outfit" cho màn hình trung bình!

Min-width

Tính năng min-width giống như việc đặt yêu cầu độ cao tối thiểu cho một chuyến đi trên tàu lượn. Nó áp dụng các phong cách khi chiều rộng màn hình ít nhất bằng giá trị chỉ định.

Hãy nhìn vào một ví dụ:

@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

Mã này nói với trình duyệt, "Khi màn hình rộng ít nhất 992px, đặt chiều rộng tối đa của các phần tử có lớp 'container' là 960px." Điều này rất phù hợp để đảm bảo rằng nội dung của bạn không kéo dài quá rộng trên các màn hình lớn.

Max-width Breakpoint

Ngược lại, chúng ta có max-width. Điều này giống như việc đặt giới hạn trọng lượng tối đa cho thang máy. Nó áp dụng các phong cách khi chiều rộng màn hình không vượt quá giá trị chỉ định.

Dưới đây là cách nó trông như thế nào:

@media (max-width: 576px) {
.navbar {
padding: 0.5rem;
}
}

Mã này có nghĩa là, "Khi màn hình không rộng hơn 576px, đặt padding của các phần tử có lớp 'navbar' là 0.5rem." Điều này rất tốt để điều chỉnh cho các màn hình nhỏ hơn.

Điểm chuyển đổi duy nhất

Đôi khi, bạn có thể muốn áp dụng các phong cách tại một điểm chuyển đổi cụ thể. Bạn có thể làm điều này bằng cách kết hợp min-width và max-width:

@media (min-width: 768px) and (max-width: 991.98px) {
.content {
font-size: 18px;
}
}

Mã này áp dụng phong cách chỉ khi chiều rộng màn hình介于 768px và 991.98px. Điều này giống như tạo một khu vực VIP cho màn hình kích thước trung bình!

Giữa các điểm chuyển đổi

Bootstrap cũng cho phép bạn nhắm mục tiêu các khoảng giữa các điểm chuyển đổi bằng cách sử dụng các lớp内置. Dưới đây là một ví dụ:

<div class="d-none d-sm-block d-md-none">
Nội dung này chỉ hiển thị trên màn hình nhỏ!
</div>

Trong ví dụ này:

• d-none ẩn phần tử theo mặc định
• d-sm-block hiển thị nó như một phần tử block trên màn hình nhỏ và lớn hơn
• d-md-none ẩn nó lại trên màn hình trung bình và lớn hơn

Kết quả? Nội dung chỉ hiển thị trên màn hình nhỏ! Đó giống như chơi hide-and-seek với nội dung của bạn trên các màn hình kích thước khác nhau.

Nhớ rằng, thiết kế responsive là tất cả về việc tạo ra một trải nghiệm người dùng mượt mà trên tất cả các thiết bị. Với các điểm chuyển đổi, bạn đang cho trang web của mình sức mạnh để thích ứng và trông đẹp nhất, không matter where it's viewed.

Khi chúng ta kết thúc bài học này, tôi hy vọng bạn cảm thấy tự tin hơn về việc sử dụng các điểm chuyển đổi trong các dự án Bootstrap của mình. Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các điểm chuyển đổi khác nhau và xem chúng ảnh hưởng như thế nào đến bố cục của bạn.

Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng những sinh viên có nhiều niềm vui với phát triển web là những người coi nó như một sân chơi. Vậy hãy tiếp tục, phá vỡ mọi thứ, sửa chúng và học từ quá trình đó. Đó là vẻ đẹp của việc lập mã - luôn có điều mới để khám phá!

Đến gặp lại lần sau, chúc các bạn lập mã vui vẻ và các trang web của các bạn luôn mượt mà, cà phê của các bạn luôn mạnh mẽ!

Credits: Image by storyset