Source

概述

用於佈局 Bootstrap 項目的組件和選項，包括包裝容器、強大的網格系統、靈活的媒體對象和響應式實用程序類。

容器

容器是 Bootstrap 中最基本的佈局元素，在使用我們默認的網格系統時是必需的。從響應式、固定寬度的容器（意味著它max-width在每個斷點處的變化）或流體寬度（意味著它100%一直都是寬的）中進行選擇。

雖然容器可以嵌套，但大多數佈局不需要嵌套容器。

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

用於.container-fluid全寬容器，跨越視口的整個寬度。

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

響應式斷點

由於 Bootstrap 是首先開發為移動設備的，因此我們使用一些媒體查詢來為我們的佈局和界面創建合理的斷點。這些斷點主要基於最小視口寬度，並允許我們隨著視口的變化放大元素。

Bootstrap 主要在我們的 Sass 源文件中為我們的佈局、網格系統和組件使用以下媒體查詢範圍或斷點。

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

由於我們在 Sass 中編寫源 CSS，我們所有的媒體查詢都可以通過 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;
  }
}

我們偶爾會使用相反方向的媒體查詢（給定的屏幕尺寸或更小）：

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

請注意，由於瀏覽器當前不支持範圍上下文查詢，我們通過使用具有更高精度的值來解決具有分數寬度的前綴min-和max-視口的限制（例如，在高 dpi 設備上的某些條件下可能發生） .

同樣，這些媒體查詢也可以通過 Sass mixins 獲得：

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

還有媒體查詢和混合使用最小和最大斷點寬度來定位單個屏幕尺寸段。

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

這些媒體查詢也可以通過 Sass mixins 獲得：

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

同樣，媒體查詢可能跨越多個斷點寬度：

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

針對相同屏幕尺寸範圍的 Sass mixin 將是：

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

Z指數

幾個 Bootstrap 組件利用z-indexCSS 屬性，通過提供第三個軸來排列內容來幫助控制佈局。我們在 Bootstrap 中使用默認的 z-index 比例，該比例旨在正確分層導航、工具提示和彈出框、模式等。

這些較高的值從任意數字開始，足夠高且足夠具體，可以理想地避免衝突。我們需要在我們的分層組件（工具提示、彈出框、導航欄、下拉菜單、模式）中使用這些標準集，以便我們可以在行為上保持合理一致。我們沒有理由不能使用100+ 或500+。

我們不鼓勵定制這些個人價值觀；如果你改變一個，你可能需要全部改變。

$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;

為了處理組件內的重疊邊界（例如，輸入組中的按鈕和輸入），我們使用低個位數z-index的1、2和3來表示默認、懸停和活動狀態。在懸停/聚焦/激活時，我們將具有更高z-index值的特定元素置於最前面，以在兄弟元素上顯示它們的邊框。