Bootstrap: Breakpoints

Breakpoints

Các breakpoint thì có thể tùy biến chiều rộng, chúng xác định responsive layout của bạn hoạt động trên các thiết bị hoặc các kích thước viewport như thế nào trong Bootstrap.

Các khái niệm cốt lõi

Các breakpoint là các khối được xây dựng sẵn của responsive design. Hãy sử dụng chúng để kiểm soát khi layout của bạn có thể được làm thích nghi tại một viewport hoặc kích thước thiết bị cụ thể.
Sử dụng các media query để kiến trúc CSS của bạn bởi breakpoint. Media query là một tính năng của CSS nó cho phép bạn áp dụng có điều kiện các style dựa vào một tập hợp các tham số của trình duyệt và hệ điều hành. Chúng tôi thường thường sử dụng nhiều nhất min-width trong các media query của mình.
Ưu tiên cho các thiết bị di động trước, responsive design là mục tiêu. CSS của Bootstrap tập trung vào áp dụng các style tối thiểu để tạo ra một layout làm việc tại breakpoint nhỏ nhất, và sau đó sắp từng lớp trên các style để điều chỉnh thiết kế đó cho các thiết bị lớn hơn. Điều này tối ưu hóa CSS của bạn, cải thiện thời gian hiển thị, và cung cấp một trải nghiệm tuyệt vời cho khách truy cập của bạn.

Các breakpoint có sẵn

Bootstrap bao gồm sáu breakpoint mặc định, đôi khi được gọi là các tầng lưới, để xây dựng các trang web có thể hiển thị tốt trên nhiều thiết bị. Các breakpoint này có thể được tùy chỉnh nếu như bạn đang sử dụng các tập tin nguồn Sass của chúng tôi.

Mỗi breakpoint được chọn lựa để thoải mái chứa các container có chiều rộng là bội số của 12. Các breakpoint cũng là đại diện cho một tập hợp con của các kích thước thiết bị và các kích thước viewport phổ biến — chúng không nhắm mục tiêu cụ thể mọi trường hợp sử dụng hoặc thiết bị. Thay vào đó, các phạm vi cung cấp một nền tảng vững chắc và nhất quán để xây dựng cho hầu hết mọi thiết bị.

Các breakpoint này có thể tùy chỉnh thông qua Sass — bạn sẽ tìm thấy chúng trong bản đồ Sass trong tập tin _variables.scss của chúng tôi.

Media queries

Vì Bootstrap được phát triển để ưu tiên cho thiết bị di động, nên chúng tôi sử dụng một ít media query để tạo ra các breakpoint hợp lý cho các layout và các interface của chúng tôi. Các breakpoint này chủ yếu dựa trên chiều rộng tối thiểu của viewport và cho phép chúng ta tăng số lượng các phần tử khi viewport thay đổi.

Min-width

Bootstrap chủ yếu sử dụng các phạm vi media query — hoặc các breakpoint sau — trong các tập tin nguồn Sass cho layout, grid system, và các component của chúng tôi.

Các Sass mixin này dịch sang CSS đã biên dịch của chúng tôi bằng cách sử dụng các giá trị được khai báo trong các biến Sass của chúng tôi. Ví dụ:

Max-width

Chúng tôi thỉnh thoảng sử dụng các media query đi theo hướng khác (kích thước màn hình đã cho hoặc nhỏ hơn):

Các mixin này lấy các breakpoint đã được khai báo đó, trừ đi .02px khỏi chúng, và sử dụng chúng như là các giá trị max-width của chúng tôi. Ví dụ:

Tại sao lại trừ đi .02px? Các trình duyệt hiện tại chưa hỗ trợ range context queries, vì vậy chúng ta đang phải làm việc xung quanh các sự hạn chế của các prefix là min- và max- và các viewport với chiều rộng rất nhỏ bé (nó có thể xảy ra dưới các điều kiện nhất định trên các thiết bị có dpi cao, ví dụ vậy) bằng cách sử dụng các giá trị với độ chính xác cao hơn.

Single breakpoint

Ngoài ra cũng có các media query và các mixin để nhắm đến một đoạn kích thước màn hình riêng rẽ bằng cách sử dụng các breakpoint có chiều rộng tối thiểu và tối đa.