Nchịkọta
Ngwa na nhọrọ maka ịtọpụta ọrụ Bootstrap gị, gụnyere ihe mkpuchi, sistemu grid siri ike, ihe mgbasa ozi na-agbanwe agbanwe, yana klaasị na-anabata.
Akpa
Akpa bụ ihe nhazi nhazi kachasị na Bootstrap ma achọrọ ya mgbe ị 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 |
Nnukwu nnukwu ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
All-na-otu
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>
Mmiri mmiri
Jiri .container-fluid
maka akpa obosara zuru oke, na-agbasa obosara nke ebe nlele.
<div class="container-fluid">
...
</div>
Na-anabata
Akpa na-anabata ihe dị ọhụrụ na Bootstrap v4.4. Ha 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
, na xl
.
<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>
Ebe nkwụsịtụ na-anabata
Ebe ọ bụ na ebu ụzọ mepụta Bootstrap ka ọ bụrụ ekwentị mkpanaaka, anyị na-eji ajụjụ mgbasa ozi dị ole na ole mepụta ebe nkwụsịtụ nwere ezi uche maka nhazi na ihu anyị. Ebe nkwụsịtụ ndị a na-adaberekarị na obosara nlele opekempe ma na-enye anyị ohere ịbawanye ihe dị ka ihe nlele na-agbanwe.
Bootstrap na-eji usoro ajụjụ mgbasa ozi ndị a na-esonụ-ma ọ bụ ebe nkwụsịtụ-na faịlụ Sass anyị maka nhazi, usoro grid, na akụrụngwa anyị.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }
Ebe anyị na-ede CSS isi iyi anyị na Sass, ajụjụ mgbasa ozi anyị niile dị site na mixins Sass:
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Anyị na-eji ajụjụ mgbasa ozi na-aga n'akụkụ ọzọ (nha ihuenyo enyere ma ọ bụ obere ):
// 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
min-
namax-
viewport nwere obosara akụkụ (nke nwere ike ime n'okpuru ọnọdụ ụfọdụ na ngwaọrụ dpi dị elu, dịka ọmụmaatụ) site na iji ụkpụrụ nwere nkenke dị elu maka ntụnyere ndị a. .
Ọzọkwa, ajụjụ mgbasa ozi ndị a dịkwa site na Sass mixins:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Enwekwara ajụjụ mgbasa ozi na mixins maka ịchebe otu akụkụ nke nha ihuenyo site na iji opekempe na obosara nkwụsịtụ kacha.
// 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) { ... }
Ajụjụ mgbasa ozi ndị a dịkwa site na mixins Sass:
@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) { ... }
N'otu aka ahụ, ajụjụ mgbasa ozi nwere ike gbasaa ọtụtụ obosara nkwụsịtụ:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Ngwakọta Sass maka ịchụ otu nha nha ihuenyo ga-abụ:
@include media-breakpoint-between(md, xl) { ... }
Z-index
Ọtụtụ ngwa Bootstrap na-eji z-index
, ihe onwunwe CSS na-enyere aka njikwa nhazi site n'inye axis nke atọ iji hazie ọdịnaya. Anyị na-eji nha nha z-index ndabara na Bootstrap nke emebere ka ọ bụrụ ntugharị nke ọma, ndụmọdụ ngwaọrụ na popovers, modals na ndị ọzọ.
Ụkpụrụ ndị a dị elu na-amalite na ọnụọgụ aka ike, dị elu na nke akọwapụtara nke ọma iji zere esemokwu. Anyị chọrọ usoro ọkọlọtọ nke ihe ndị a n'ofe akụkụ anyị nwere akwa-ntụpọ ngwaọrụ, popovers, navbars, dropdowns, modals-ka anyị wee nwee ike ịdị na-agbanwe agbanwe na omume. Ọ nweghị ihe kpatara na anyị agaghị eji 100
+ ma ọ bụ 500
+ mee ihe.
Anyị anaghị akwado ịhazi ụkpụrụ ndị a n'otu n'otu; ọ bụrụ na ị gbanwee otu, o yikarịrị ka ị ga-achọ ịgbanwe ha niile.
$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;
Iji jikwaa oke oke n'ime akụrụngwa (dịka ọmụmaatụ, bọtịnụ na ntinye n'ime otu ntinye), anyị na-eji z-index
ụkpụrụ otu nkeji dị ala nke 1
, 2
, yana 3
maka ndabara, hover na steeti nọ n'ọrụ. Na hover/focus/na-arụsi ọrụ ike, anyị na-ebute otu mmewere n'ihu nke nwere z-index
uru dị elu iji gosi oke ha n'elu ihe ụmụnne.