概觀 (Overview)

介紹 Bootstrap 專案佈局的元件和選項,包括容器、強大的網格系統、靈活的媒體物件和響應式通用類別。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

容器

容器是 Bootstrap 最基本的排版元素,且 當使用我們的網格系統時 是必須的。從響應式、固定寬度容器(表示其最大寬度限制在每一個中斷點)或可變寬度(顯示為 100% 寬)中選擇。

儘管容器 可以 巢狀,但大部分排版不需要巢狀。

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

對於完全寬度容器(包含所有視圖的寬度)使用.container-fluid

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

響應式斷點

由於 Bootstrap 是被開發來作行動優先,我們使用許多 media queries 建立靈敏的中斷點用於我們的排版和介面。這些中斷點大部分基於最小 viewport,並且允許我們隨著 viewport 的變化放大組件。

Bootstrap 主要使用以下 media queries 或中斷點針對我們的佈局、網格系統、和元件在的我們的 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) { ... }

由於我們將我們的 CSS 寫入 Sass,通過 Sass mixins 可以使用所有我們的 media queries。

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

我們有時候使用 media queries 作為它的指引(給定的螢幕尺寸或更小)。

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

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

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

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

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

重聲一次,通過 Sass mixins 也可以使用這些 media queries:

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

使用最小和最大中斷點寬度,也有一些 media queries 和 mixins 用於特定螢幕尺寸的其中一段。

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

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

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

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

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

通過Sass mixins,也可以使用這 media querie:

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

類似的 media queries 也跨過多個中斷點寬度:

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

用於特定螢幕尺寸範圍的 Sass mixins 是:

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

Z-index

一些 Bootstrap 元件使用 z-index,它是提供排版內容第三個軸的 CSS 屬性。我們使用 Bootstrap 中的預設 z-index ,其目的是正確圖層導引、工具提示和 popover、modals 等等。

我們並不鼓勵自定義這些值;如果你改變了一個,你可能需要全部改變。

$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,而導航元件和 popovers 使用更高的 z-index 確保它們的內容覆蓋。