Điểm ngắt

Khái niệm cốt lõi

• Điểm ngắt là các khối xây dựng của thiết kế đáp ứng. Sử dụng chúng để kiểm soát khi nào bố cục của bạn có thể được điều chỉnh ở một cửa sổ xem hoặc kích thước thiết bị cụ thể.

• Sử dụng các truy vấn phương tiện để kiến ​​trúc CSS của bạn theo điểm ngắt. Truy vấn phương tiện là một tính năng của CSS cho phép bạn áp dụng có điều kiện các kiểu dựa trên một tập hợp các thông số trình duyệt và hệ điều hành. Chúng tôi thường sử dụng nhất min-widthtrong các truy vấn phương tiện truyền thông của mình.

• Đầu tiên, thiết kế đáp ứng dành cho thiết bị di động là mục tiêu. CSS của Bootstrap nhằm mục đích áp dụng mức tối thiểu của các kiểu để làm cho bố cục hoạt động ở điểm ngắt nhỏ nhất, sau đó tạo các lớp trên các kiểu để đ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 trải nghiệm tuyệt vời cho khách truy cập của bạn.

Các điểm ngắt có sẵn

Bootstrap bao gồm sáu điểm ngắt mặc định, đôi khi được gọi là các tầng lưới , để xây dựng một cách đáp ứng. Các điểm ngắt này có thể được tùy chỉnh nếu bạn đang sử dụng các tệp Sass nguồn của chúng tôi.

Mỗi điểm ngắt được chọn để chứa thoải mái các thùng chứa có chiều rộng là bội số của 12. Điểm ngắt cũng đại diện cho một tập hợp con các kích thước thiết bị và kích thước khung nhìn chung — chúng không nhắm mục tiêu cụ thể đến 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 điểm ngắt 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 _variables.scssbiểu định kiểu của chúng tôi.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Để biết thêm thông tin và ví dụ về cách sửa đổi bản đồ và biến Sass của chúng tôi, vui lòng tham khảo phần Sass của tài liệu Grid .

Truy vấn phương tiện truyền thông

Vì Bootstrap trước tiên được phát triển để dành cho thiết bị di động, chúng tôi sử dụng một số truy vấn phương tiện truyền thông để tạo ra các điểm ngắt hợp lý cho bố cục và giao diện của chúng tôi. Các điểm ngắt này chủ yếu dựa trên độ rộng tối thiểu của chế độ xem và cho phép chúng tôi mở rộng quy mô các phần tử khi chế độ xem thay đổi.

Chiều rộng tối thiểu

Bootstrap chủ yếu sử dụng các phạm vi truy vấn phương tiện sau đây — hoặc các điểm ngắt — trong các tệp Sass nguồn của chúng tôi cho bố cục, hệ thống lưới và các thành phần của chúng tôi.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Các mixin Sass này dịch trong 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ụ:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Chiều rộng tối đa

Đôi khi chúng tôi sử dụng các truy vấn phương tiện theo hướng khác (kích thước màn hình đã cho hoặc nhỏ hơn ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Các mixin này lấy các điểm ngắt đã khai báo đó, trừ đi .02pxvà sử dụng chúng làm max-widthgiá trị của chúng tôi. Ví dụ:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Điểm ngắt đơn

Ngoài ra còn có các truy vấn phương tiện và kết hợp để nhắm mục tiêu một phân đoạn kích thước màn hình bằng cách sử dụng chiều rộng điểm ngắt tối thiểu và tối đa.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Ví dụ, @include media-breakpoint-only(md) { ... }kết quả sẽ là:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Giữa các điểm ngắt

Tương tự, các truy vấn phương tiện có thể kéo dài nhiều độ rộng điểm ngắt:

@include media-breakpoint-between(md, xl) { ... }

Kết quả là:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }