Akpa
Akpa bụ ngọngọ ụlọ nke Bootstrap nke nwere, pad, na kwado ọdịnaya gị n'ime ngwaọrụ ma ọ bụ nlegharị anya enyere.
Ka ha si arụ ọrụ
Akpa bụ ihe nhazi nhazi kachasị dị na Bootstrap ma achọrọ ya mgbe anyị na-eji sistemụ grid anyị . A na-eji akpa na-ebu, pad, na (mgbe ụfọdụ) etiti ọdịnaya dị n'ime ha. Ọ bụ ezie na enwere ike ịgbanye arịa , ọtụtụ nhazi anaghị achọ akpa akwụrụ.
Bootstrap na-abịa na akpa atọ dị iche iche:
.container
, nke na-edobe amax-width
n'ebe nkwụsịtụ ọ bụla na-anabata.container-fluid
, nke bụwidth: 100%
n'oge nkwụsịtụ niile.container-{breakpoint}
, nke bụwidth: 100%
ruo mgbe a kapịrị ọnụ nkwụsịtụ
Tebụlụ dị n'okpuru na-egosi otú akpa nke ọ bụla si max-width
atụnyere nke mbụ .container
yana .container-fluid
gafee ebe nkwụsịtụ ọ bụla.
Hụ ha ka ha na-eme ma tulee ha na ihe atụ Grid anyị .
Obere obere <576px |
Obere ≥576px |
Ọkara ≥768px |
Nnukwu ≥992px |
X-Large ≥1200px |
XX- Nnukwu ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Akpa mbụ
Klas nke ndabara .container
bụ ihe na-anabata, nke nwere ogologo obosara, nke pụtara max-width
mgbanwe ya na ebe nkwụsịtụ ọ bụla.
<div class="container">
<!-- Content here -->
</div>
Akpa na-anabata
Ngwongwo na-anabata ihe na-enye gị ohere ịkọwa klas nke dị 100% n'obosara ruo mgbe a ga-erute ebe nkwụsịtụ akọwapụtara, mgbe nke a gasịrị, anyị na-etinye max-width
s maka nke ọ bụla n'ime ebe nkwụsịtụ dị elu. Dịka ọmụmaatụ, .container-sm
obosara 100% ịmalite ruo mgbe a sm
ga-erute ebe nkwụsịtụ, ebe ọ ga-eji md
, lg
, xl
, na xxl
.
<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>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Akpa mmiri mmiri
Jiri .container-fluid
maka akpa obosara zuru oke, na-agbasa obosara nke ebe nlele.
<div class="container-fluid">
...
</div>
Sass
Dịka egosiri n'elu, Bootstrap na-ewepụta usoro klaasị akpa agbapụtagoro iji nyere gị aka iwulite nhazi nke ịchọrọ. Ị nwere ike hazie klas akpa ndị a eburu ụzọ kọwaa site n'ịgbanwe maapụ Sass (dị na _variables.scss
) nke na-enye ha ike:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Na mgbakwunye na ịhazi Sass, ị nwekwara ike ịmepụta arịa nke gị na Sass mixin anyị.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Maka ozi ndị ọzọ na ihe atụ maka otu esi agbanwe maapụ Sass na mgbanwe, biko rụtụ aka na ngalaba Sass nke akwụkwọ Grid .