Tổng quan

Các thành phần và tùy chọn để bố trí dự án Bootstrap của bạn, bao gồm gói các vùng chứa, hệ thống lưới mạnh mẽ, đối tượng phương tiện linh hoạt và các lớp tiện ích đáp ứng.

Hộp đựng

Vùng chứa là phần tử bố cục cơ bản nhất trong Bootstrap và được yêu cầu khi sử dụng hệ thống lưới mặc định của chúng tôi . Các vùng chứa được sử dụng để chứa, đệm và (đôi khi) căn giữa nội dung bên trong chúng. Trong khi các vùng chứa có thể được lồng vào nhau, hầu hết các bố cục không yêu cầu vùng chứa lồng nhau.

Bootstrap đi kèm với ba vùng chứa khác nhau:

• .container, đặt một max-widthtại mỗi điểm ngắt đáp ứng
• .container-fluid, đó là width: 100%tất cả các điểm ngắt
• .container-{breakpoint}, width: 100%cho đến khi điểm ngắt được chỉ định

Bảng dưới đây minh họa cách mỗi vùng chứa max-widthso sánh với bản gốc .containervà .container-fluidtrên mỗi điểm ngắt.

Xem chúng hoạt động và so sánh chúng trong ví dụ Grid của chúng tôi .

Tất cả hợp lại thành một

Lớp mặc định của chúng tôi .containerlà một vùng chứa đáp ứng, có chiều rộng cố định, có nghĩa là các max-widththay đổi của nó tại mỗi điểm ngắt.

<div class="container">
  <!-- Content here -->
</div>

Dịch

Sử dụng .container-fluidcho vùng chứa có chiều rộng đầy đủ, kéo dài toàn bộ chiều rộng của chế độ xem.

<div class="container-fluid">
  ...
</div>

Phản ứng nhanh nhẹn

Vùng chứa đáp ứng là tính năng mới trong Bootstrap v4.4. Chúng cho phép bạn chỉ định một lớp có độ rộng 100% cho đến khi đạt đến điểm ngắt được chỉ định, sau đó chúng tôi áp dụng max-widths cho từng điểm ngắt cao hơn. Ví dụ: .container-smrộng 100% để bắt đầu cho đến khi smđạt đến điểm ngắt, nơi nó sẽ mở rộng quy mô với md, lgvà xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Điểm ngắt đáp ứ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.

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.

// Extra 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) { ... }

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

Vì chúng tôi viết CSS nguồn của mình trong Sass, nên tất cả các truy vấn phương tiện của chúng tôi đều có sẵn thông qua Sass 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) { ... }

// 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;
  }
}

Đô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 ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Một lần nữa, các truy vấn phương tiện này cũng có sẵn thông qua Sass mixin:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

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

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.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

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

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

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

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

Các truy vấn phương tiện này cũng có sẵn thông qua Sass mixin:

@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) { ... }

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:

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

Hỗn hợp Sass để nhắm mục tiêu cùng một phạm vi kích thước màn hình sẽ là:

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

Chỉ số Z

Một số thành phần Bootstrap sử dụng z-indexthuộc tính CSS giúp kiểm soát bố cục bằng cách cung cấp trục thứ ba để sắp xếp nội dung. Chúng tôi sử dụng thang đo chỉ mục z mặc định trong Bootstrap được thiết kế để điều hướng lớp, chú giải công cụ và cửa sổ bật lên, phương thức và hơn thế nữa.

Các giá trị cao hơn này bắt đầu từ một số tùy ý, đủ cao và cụ thể để tránh xung đột một cách lý tưởng. Chúng tôi cần một bộ tiêu chuẩn của những điều này trên các thành phần phân lớp của chúng tôi — chú giải công cụ, cửa sổ bật lên, thanh điều hướng, trình đơn thả xuống, phương thức — để chúng tôi có thể nhất quán một cách hợp lý trong các hành vi. Không có lý do gì chúng tôi không thể sử dụng 100+ hoặc 500+.

Chúng tôi không khuyến khích tùy chỉnh các giá trị riêng lẻ này; nếu bạn thay đổi một, bạn có thể cần phải thay đổi tất cả.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Để xử lý các đường viền chồng chéo trong các thành phần (ví dụ: các nút và đầu vào trong các nhóm đầu vào), chúng tôi sử dụng các z-indexgiá trị một chữ số thấp của 1và 2cho 3các trạng thái mặc định, di chuột và hoạt động. Khi di chuột / tiêu điểm / hoạt động, chúng tôi đưa một phần tử cụ thể lên hàng đầu với z-indexgiá trị cao hơn để hiển thị đường viền của chúng so với các phần tử anh em.