• 原文鏈接：getbootstrap.com/docs/4.1/la…

---

容器

容器是Bootstrap中最基本的布局元素，在使用Bootstrap網(wǎng)格系統(tǒng)的必備之器。你可以選擇一個響應(yīng)式的、固定寬度的容器（意味著其max-width在每個尺寸斷點處變化），或者靈活寬度的容器（意味著它總是100%寬度）。

雖然容器可以嵌套，但大多數(shù)布局都沒必要用嵌套容器。

<div class="container"><!-- Content here --> </div> 復(fù)制代碼

使用.container-fluid可以得到一個100%寬度的容器，橫跨整個視口寬度。

<div class="container-fluid"><!-- Content here --> </div> 復(fù)制代碼

---

響應(yīng)式斷點

既然Bootstrap是移動端優(yōu)先的，我們使用一些媒體查詢來為布局和界面創(chuàng)建合理的斷點。這些斷點大多基于最小視口寬度，允許我們隨著視口縮放元素。

在布局、網(wǎng)格系統(tǒng)、組件的Sass文件中，Bootstrap主要使用下面列出的媒體查詢范圍——也就是斷點。

// 極小設(shè)備(portrait phones,小于576px) // 沒有“xs”對應(yīng)的媒體查詢，因為它在Bootstrap中是默認(rèn)的。// 小型設(shè)備(landscape phones, 576px及以上) @media (min-width: 576px) { ... }// 中型設(shè)備(tablets, 768px及以上) @media (min-width: 768px) { ... }// 大型設(shè)備(desktops, 992px及以上) @media (min-width: 992px) { ... }// 超大設(shè)備(large desktops, 1200px及以上) @media (min-width: 1200px) { ... } 復(fù)制代碼

Bootstrap的CSS源代碼都是用Sass寫的，所以所有的媒體查詢都支持Sass的mixin：

// xs斷點不需要媒體查詢 //因為它在`@media (min-width: 0) { ... }`有效 @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... }// 例子：從 `min-width: 0`開始是隱藏的, //從`sm` 斷點開始就顯示出來了 .custom-class {display: none; } @include media-breakpoint-up(sm) {.custom-class {display: block;} } 復(fù)制代碼

我們會酌情max-width來界定媒體查詢：

// 極小設(shè)備(portrait phones,小于576px) @media (max-width: 575.98px) { ... }//小型設(shè)備(landscape phones, 小于768px) @media (max-width: 767.98px) { ... }// 中型設(shè)備(tablets, 小于992px) @media (max-width: 991.98px) { ... }// 大型設(shè)備(desktops, 小于1200px) @media (max-width: 1199.98px) { ... }// 超大設(shè)備(large desktops) // 因為xl的斷點沒有上限，故沒有媒體查詢 復(fù)制代碼

注意，當(dāng)前瀏覽器不支持range context queries，所以我們在處理min-和max-前綴以及寬度為分?jǐn)?shù)的視口（例如在高dpi設(shè)備上可能導(dǎo)致不確定條件）時，使用更高精度的值來進行比較。

在說一次，媒體查詢也支持Sass的mixin。

也可以使用最大最小斷點寬度的媒體查詢和mixin來指定某個范圍的屏幕尺寸。

// 極小設(shè)備(portrait phones,小于576px) @media (max-width: 575.98px) { ... }//小型設(shè)備(landscape phones, 576px到768px以左) @media (min-width: 576px) and (max-width: 767.98px) { ... }// 中型設(shè)備(tablets, 768px到992px以左) @media (min-width: 768px) and (max-width: 991.98px) { ... }// 大型設(shè)備(desktops, 992px到1200px以左) @media (min-width: 992px) and (max-width: 1199.98px) { ... }// 超大設(shè)備(large desktops，1200px及以上) @media (min-width: 1200px) { ... } 復(fù)制代碼

類似地，媒體查詢可以跨過多個斷點：

//例子 // 對中型到超大型范圍的設(shè)備應(yīng)用樣式 @media (min-width: 768px) and (max-width: 1199.98px) { ... } 復(fù)制代碼

對應(yīng)的Sassmixin則是：

@include media-breakpoint-between(md, xl) { ... } 復(fù)制代碼

---

Z-index

多個Bootstrap組件都用到了z-index——通過提供第三個坐標(biāo)來幫你控制布局的CSS屬性。在Bootstrap中用的默認(rèn)z-index范圍來給navigation、tooltip、popover、modal等等分層。

這些數(shù)值可以始于任意數(shù)字，足夠大、足夠特殊，用以完美避免沖突。我們需要對分層組件進行標(biāo)準(zhǔn)的設(shè)置，這樣才能在表現(xiàn)上達到合理一致。所以沒有理由不去用100以上甚至500以上的數(shù)值。

我們不建議自定義這些值，因為改了一個，你就可能要改所有的。

$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; 復(fù)制代碼

為了處理組件間重疊的border（例如input組中的input和button），我們對默認(rèn)、鼠標(biāo)懸停、活動狀態(tài)使用較小的個位數(shù)1、2、3。在這些狀態(tài)下，我們把某個特定元素放在最前面，來顯示它們的border。

總結(jié)

以上是生活随笔為你收集整理的【译】Bootstrap基本理念的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。