概觀

元件和選項，用於配置您的 Bootstrap 專案版面，包括包裝容器、強大的格線系統、彈性的媒體物件和回應式工具類別。

容器

容器是 Bootstrap 中最基本的版面配置元素，並且在使用我們的預設格線系統時是必要的。容器用於包含、填補，並且（有時）置中其內的內容。雖然容器可以巢狀，但大多數版面配置不需要巢狀容器。

Bootstrap 提供了三種不同的容器

.container，在每個回應式斷點設定 max-width
.container-fluid，在所有斷點都是 width: 100%
.container-{breakpoint}，在指定的斷點之前都是 width: 100%

下表說明了每個容器的 max-width 如何與原始 .container 和 .container-fluid 在每個斷點中進行比較。

在我們的格線範例中查看它們的實際運作並進行比較。

	特小 <576px	小 ≥576px	中 ≥768px	大 ≥992px	特大 ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

多合一

我們的預設 .container 類別是一個具有回應式、固定寬度的容器，表示其 max-width 會在每個中斷點變更。

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

流動

使用 .container-fluid 來取得一個全寬容器，橫跨視窗的整個寬度。

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

回應式

回應式容器是 Bootstrap v4.4 的新功能。它們允許您指定一個類別，在達到指定的斷點之前，該類別的寬度為 100%，之後我們會為每個較高的斷點套用 max-width。例如，.container-sm 在一開始時寬度為 100%，直到達到 sm 斷點，之後它會隨著 md、lg 和 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>

回應式斷點

由於 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 混入來取得

// 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- 前綴和視窗具有小數寬度（例如，在某些情況下可能會在高解析度裝置上發生）的限制。

同樣地，這些媒體查詢也可以透過 Sass 混入來取得

@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 混入來取得

@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 混入為

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

Z 軸順序

多個 Bootstrap 元件使用 z-index，這是一個 CSS 屬性，透過提供第三個軸來排列內容，有助於控制版面。我們在 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 值來顯示其邊框高於同層元素。