網(wǎng)格（Grid）
使用我們強(qiáng)大、行動(dòng)優(yōu)先的彈性盒子的網(wǎng)格來(lái)建立符合各種尺寸的網(wǎng)頁(yè)排版，包含十二欄系統(tǒng)、六個(gè)缺省的響應(yīng)式斷點(diǎn)、Sass變量和mixins，以及很多預(yù)定義的類(lèi)。
例子
Bootstrap的網(wǎng)格系統(tǒng)使用一系列容器、行和列來(lái)布局和對(duì)齊內(nèi)容。它采用彈性盒子設(shè)計(jì)，反應(yīng)靈敏。下面是一個(gè)示例，深入解釋了網(wǎng)格系統(tǒng)是如何組合在一起的。
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>上面的示例使用預(yù)定義的網(wǎng)格類(lèi)在所有設(shè)備和窗口中創(chuàng)建三個(gè)等寬列。這些列在帶有.container的頁(yè)面中居中。
工作原理
將其分解，以下是網(wǎng)格系統(tǒng)是如何組合在一起的：
-
我們的網(wǎng)格支持六個(gè)響應(yīng)斷點(diǎn)。 斷點(diǎn)基于最小寬度媒體查詢，這意味著它們會(huì)影響該斷點(diǎn)及其上的所有斷點(diǎn)（例如，col-sm-4適用于sm、md、lg、xl和xxl）。這意味著您可以通過(guò)每個(gè)斷點(diǎn)控制容器和列的大小以及行為。
-
容器居中并水平放置內(nèi)容。 使用
.container表示響應(yīng)像素寬度，.container-fluid表示寬度：100%覆蓋所有視口和設(shè)備，或使用響應(yīng)容器（例如..container-md)）表示流體和像素寬度的組合。 -
行是列的包裝器。 每列都有水平填充（稱為間隙），用于控制它們之間的間距。然后在具有負(fù)邊距的行上抵消此填充，以確保列中的內(nèi)容在視覺(jué)上與左側(cè)對(duì)齊。行還支持修改器類(lèi)來(lái)統(tǒng)一應(yīng)用列大小調(diào)整，并支持邊距類(lèi)來(lái)更改內(nèi)容的間距。
-
列非常靈活。 每行有12個(gè)模板列可用，允許您創(chuàng)建跨任意列數(shù)的不同元素組合。列類(lèi)表示要跨越的模板列的數(shù)量（例如，
col-4跨越四個(gè)列）。寬度是按百分比設(shè)置的，因此相對(duì)大小總是相同的。 -
間隙也響應(yīng)和定制。 所有斷點(diǎn)上都可以使用Gutter類(lèi)，其大小與邊距和填充間距相同。將水平間隙更改為.gx-*類(lèi)，將垂直間隙更改為.gy-*類(lèi)，或?qū)⑺虚g隙更改為.g-*類(lèi)。g-0也可用于移除間隙。
-
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Sass變量、地圖和mixin為電網(wǎng)供電。如果您不想在Bootstrap中使用預(yù)定義的網(wǎng)格類(lèi)，您可以使用我們的網(wǎng)格源Sass創(chuàng)建您自己的具有更多語(yǔ)義標(biāo)記的網(wǎng)格類(lèi)。我們還包括一些CSS自定義屬性來(lái)使用這些Sass變量，為您提供更大的靈活性。
注意flexbox的局限性和缺陷，比如不能將一些HTML元素用作flex容器。 inability to use some HTML elements as flex containers.
網(wǎng)格選項(xiàng)
Bootstrap的網(wǎng)格系統(tǒng)可以適應(yīng)所有六個(gè)默認(rèn)斷點(diǎn)，以及您自定義的任何斷點(diǎn)。六個(gè)默認(rèn)網(wǎng)格層如下所示：
- 超小型 (xs)
- 小型 (sm)
- 中等 (md)
- 大 (lg)
- 特大 (xl)
- 超特大 (xxl)
如上所述，每個(gè)斷點(diǎn)都有自己的容器、唯一的類(lèi)前綴和修飾符。以下是網(wǎng)格如何跨越這些斷點(diǎn)進(jìn)行更改：
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
自動(dòng)布局列
利用特定于斷點(diǎn)的列類(lèi)來(lái)輕松調(diào)整列大小，而不需要顯式的編號(hào)類(lèi)，如.col-sm-6。
等寬
例如，這里有兩個(gè)網(wǎng)格布局，適用于從xs到xxl的每個(gè)設(shè)備和窗口。為每個(gè)斷點(diǎn)添加任意數(shù)量的無(wú)單元類(lèi)，每個(gè)列的寬度都相同。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>設(shè)置一個(gè)列寬
彈性盒子網(wǎng)格列的自動(dòng)布局還意味著您可以設(shè)置一列的寬度，并使其周?chē)耐?jí)列自動(dòng)調(diào)整大小。您可以使用預(yù)定義的網(wǎng)格類(lèi)（如下所示）、網(wǎng)格混合或內(nèi)聯(lián)寬度。請(qǐng)注意，無(wú)論中心列的寬度如何，其他列都將調(diào)整大小。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>可變寬度內(nèi)容
使用col-{breakpoint}-auto類(lèi)根據(jù)列內(nèi)容的自然寬度調(diào)整列的大小。
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>響應(yīng)類(lèi)
Bootstrap的網(wǎng)格包括六層預(yù)定義的類(lèi)，用于構(gòu)建復(fù)雜的響應(yīng)性布局。在您認(rèn)為合適的超小型、小型、中型、大型或超大型設(shè)備上自定義列的大小。
所有斷點(diǎn)
對(duì)于從最小設(shè)備到最大設(shè)備都相同的網(wǎng)格，請(qǐng)使用.col和.col-*類(lèi)。當(dāng)需要特別大的列時(shí)，指定一個(gè)大小編號(hào)的類(lèi)；否則，請(qǐng)隨意堅(jiān)持。
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>水平堆放
使用一組.col sm-*類(lèi)，可以創(chuàng)建一個(gè)基本的網(wǎng)格系統(tǒng)，該系統(tǒng)從堆疊開(kāi)始，在小斷點(diǎn)（sm）處變?yōu)樗健?/p>
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>混合和匹配
不希望列簡(jiǎn)單地堆疊在一些網(wǎng)格層中嗎？根據(jù)需要為每一層使用不同類(lèi)的組合。請(qǐng)參閱下面的示例，以更好地了解其工作原理
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>行和列
使用.row-cols-*類(lèi)快速設(shè)置最能呈現(xiàn)內(nèi)容和布局的列數(shù)。普通的.col-*類(lèi)應(yīng)用于各個(gè)列（例如.col-md-4），而.row-cols-auto類(lèi)是作為快捷方式在父.row上設(shè)置的。使用.row-cols-auto可以為列指定其自然寬度。
使用這些行-列類(lèi)可以快速創(chuàng)建基本網(wǎng)格布局或控制卡片布局。
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div><div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div><div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div><div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div><div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div><div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>You can also use the accompanying Sass mixin, row-cols():
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
嵌套
要使用默認(rèn)網(wǎng)格嵌套內(nèi)容，請(qǐng)?jiān)诂F(xiàn)有的.col sm-*列中添加一個(gè)新的.row和一組.col sm-*列。嵌套行應(yīng)包含一組最多12個(gè)或更少的列（不要求使用所有12個(gè)可用列）。
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>Sass
使用Bootstrap程序的源Sass文件時(shí)，可以選擇使用Sass變量和mixin來(lái)創(chuàng)建自定義、語(yǔ)義和響應(yīng)頁(yè)面布局。我們預(yù)定義的網(wǎng)格類(lèi)使用這些相同的變量和mixin來(lái)為快速響應(yīng)的布局提供一整套現(xiàn)成的類(lèi)。
變量
變量和映射決定了列數(shù)、槽寬度以及開(kāi)始浮動(dòng)列的媒體查詢點(diǎn)。我們使用這些來(lái)生成上面記錄的預(yù)定義網(wǎng)格類(lèi)，以及下面列出的定制mixin。
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixins
Mixins與網(wǎng)格變量一起使用，為單個(gè)網(wǎng)格列生成語(yǔ)義CSS。
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
例子
您可以將變量修改為自己的自定義值，或者只使用帶有默認(rèn)值的mixin。下面是一個(gè)使用默認(rèn)設(shè)置創(chuàng)建兩列之間有間隙的布局的示例。
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>自定義網(wǎng)格
使用我們內(nèi)置的網(wǎng)格Sass變量和映射，可以完全定制預(yù)定義的網(wǎng)格類(lèi)。更改層數(shù)、媒體查詢維度和容器寬度，然后重新編譯。
列和間隙
可以通過(guò)Sass變量修改網(wǎng)格列的數(shù)量$grid columns用于生成每個(gè)單獨(dú)列的寬度（以百分比為單位），而$grid gutter width用于設(shè)置列間隙的寬度
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
網(wǎng)格層
除了列本身之外，還可以自定義網(wǎng)格層的數(shù)量。如果您只需要四個(gè)網(wǎng)格層，您可以將$grid breakpoints和$container max widths更新為如下內(nèi)容：
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
對(duì)Sass變量或映射進(jìn)行任何更改時(shí)，需要保存更改并重新編譯。這樣做將輸出一組全新的預(yù)定義網(wǎng)格類(lèi)，用于列寬、偏移和排序。響應(yīng)可見(jiàn)性實(shí)用程序也將更新為使用自定義斷點(diǎn)。確保以px（而不是rem、em或%）設(shè)置網(wǎng)格值。