概述 ·啟動 (getbootstrap.com)

概述 ·啟動 (getbootstrap.com)概述 ·啟動 (getbootstrap.com)

概述

用於佈置 Bootstrap 專案的元件和選項，包括包裝容器、功能強大的網格系統、靈活的媒體對象和回應式實用程式類。

從 Adobe Stock 取得 10 張免費圖片。現在開始。通過碳做廣告

器皿

容器是 Bootstrap 中最基本的佈局元素，在使用我們的預設網格系統時是必需的。從回應式固定寬度容器（意味著它在每個斷點處的變化）或流體寬度（意味著它始終很寬）中進行選擇。max-width100%

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

<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 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 獲得：複製

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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

請注意，由於瀏覽器當前不支援範圍上下文查詢，因此我們通過使用更高精度的值進行這些比較，解決了最小前綴和最大前綴以及具有分數寬度的視口的限制（例如，在高 dpi 設備上的某些條件下可能會出現這種情況）。

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

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

還有媒體查詢和混合，用於使用最小和最大斷點寬度定位螢幕大小的單個段。複製

// 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 混合蛋白將是：複製

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

Z 指數

幾個 Bootstrap 元件利用 CSS 屬性，該屬性通過提供第三個軸來排列內容來説明控制佈局。我們在 Bootstrap 中使用預設的 z 索引比例，該比例旨在正確分層導航、工具提示和彈出框、模態等。z-index

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

我們不鼓勵自定義這些單個值;如果您更改一個，則可能需要全部更改它們。複製

$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-index123z-index