Nānā nui
ʻO nā ʻāpana a me nā koho no ka waiho ʻana i kāu papahana Bootstrap, e komo pū ana i nā ipu wīwī, kahi ʻōnaehana māka ikaika, kahi mea media maʻalahi, a me nā papa hana pane.
Nā pahu pahu
ʻO nā pahu ka mea hoʻonohonoho maʻamau ma Bootstrap a koi ʻia i ka wā e hoʻohana ai i kā mākou ʻōnaehana grid default . Hoʻohana ʻia nā pahu e hoʻopaʻa, pad, a (i kekahi manawa) e hoʻokomo i ka ʻike i loko o lākou. ʻOiai hiki ke hoʻopaʻa ʻia nā ipu, ʻaʻole pono ka hapa nui o nā hoʻolālā i kahi ipu pūnana.
Hele mai ʻo Bootstrap me ʻekolu pahu like ʻole:
.container
, ka mea e hoʻonoho i kahimax-width
ma kēlā me kēia haʻihaʻi pane.container-fluid
, aiawidth: 100%
ma nā wahi haʻihaʻi a pau.container-{breakpoint}
, ʻo iawidth: 100%
a hiki i ka haki i ʻōlelo ʻia
Hōʻike ka papa ma lalo i ke ʻano o ka hoʻohālikelike ʻana o kēlā me kēia pahu max-width
me ka mea kumu .container
a .container-fluid
ma kēlā me kēia wahi haʻihaʻi.
E ʻike iā lākou i ka hana a hoʻohālikelike iā lākou i kā mākou Grid hiʻohiʻona .
ʻOi aku ka liʻiliʻi <576px |
≥576px liʻiliʻi |
≥768 px |
Nui ≥992px |
Nui nui ≥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-in-one
ʻO kā mākou papa paʻamau .container
he pahu pane, paʻa-ākea, ʻo ia hoʻi kona mau max-width
loli i kēlā me kēia breakpoint.
<div class="container">
<!-- Content here -->
</div>
Waiwai
E hoʻohana .container-fluid
no ka ipu laula piha, me ka laula holoʻokoʻa o ke awa ʻike.
<div class="container-fluid">
...
</div>
Pane
He mea hou nā pahu pane ma Bootstrap v4.4. Hāʻawi lākou iā ʻoe e kuhikuhi i kahi papa i 100% ākea a hiki i ka wā i hōʻike ʻia, a laila hoʻopili mākou i nā max-width
s no kēlā me kēia o nā wahi haʻi kiʻekiʻe. No ka laʻana, .container-sm
he 100% ka laulā e hoʻomaka ai a hiki i ka sm
haʻihaʻi, kahi e piʻi ai me md
, lg
, a me 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>
Nā wahi haʻi pane
No ka mea ua hoʻomohala ʻia ʻo Bootstrap e lilo i kelepona mua, hoʻohana mākou i kahi liʻiliʻi o nā nīnau media no ka hana ʻana i nā breakpoints noʻonoʻo no kā mākou papahana a me nā pilina. Hoʻokumu ʻia kēia mau wahi haʻihaʻi ma luna o nā ākea viewport liʻiliʻi a ʻae iā mākou e hoʻonui i nā mea e like me ka loli ʻana o ka viewport.
Hoʻohana mua ʻo Bootstrap i nā pae hulina media—a i ʻole nā wahi haʻihaʻi—i loko o kā mākou kumu waihona Sass no kā mākou hoʻonohonoho, ʻōnaehana pūnaewele, a me nā ʻāpana.
// 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) { ... }
No ko mākou kākau ʻana i kā mākou kumu CSS ma Sass, loaʻa kā mākou mau nīnau media āpau ma o Sass mixins:
// 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;
}
}
Hoʻohana mākou i kekahi manawa i nā nīnau media e hele ana i kahi ʻaoʻao ʻē aʻe (ka nui o ka pale i hāʻawi ʻia a i ʻole ka liʻiliʻi ):
// 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-
me max-
nā prefix a me nā puka ʻike me nā laula haʻihaʻi (hiki ke hana ʻia ma lalo o kekahi mau kūlana ma nā hāmeʻa kiʻekiʻe-dpi, no ka laʻana) ma ka hoʻohana ʻana i nā waiwai me ka pololei o kēia mau hoʻohālikelike. .
Eia hou, loaʻa kēia mau nīnau media ma o 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;
}
}
Aia kekahi mau nīnau a me nā huila no ka huli ʻana i kahi ʻāpana o ka nui o ka pale e hoʻohana ana i ka laulā haʻahaʻa haʻahaʻa loa.
// 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) { ... }
Loaʻa kēia mau nīnau media ma o Sass mixins:
@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) { ... }
Pēlā nō, hiki i nā nīnau media ke hoʻopaʻa i nā ākea breakpoint he nui:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
ʻO ka Sass mixin no ka huli ʻana i ka nui o ka pale like:
@include media-breakpoint-between(md, xl) { ... }
Z-index
Hoʻohana kekahi mau ʻāpana Bootstrap z-index
, ka waiwai CSS e kōkua i ka hoʻokele ʻana i ka hoʻolālā ma o ka hāʻawi ʻana i ke kolu ʻekolu e hoʻonohonoho i ka ʻike. Hoʻohana mākou i kahi pālākiō z-index paʻamau i Bootstrap i hoʻolālā ʻia e hoʻonohonoho pono i ka hoʻokele, nā mea hana a me nā popovers, modals, a me nā mea hou aku.
Hoʻomaka kēia mau waiwai kiʻekiʻe ma kahi helu kūʻokoʻa, kiʻekiʻe a kikoʻī e pale pono ai i nā paio. Pono mākou i kahi hoʻonohonoho maʻamau o kēia mau mea ma waena o kā mākou ʻāpana i hoʻopaʻa ʻia - nā mea hana, popovers, navbars, dropdowns, modals - no laila hiki iā mākou ke kūpaʻa kūpono i nā ʻano. ʻAʻohe kumu i hiki ʻole ai iā mākou ke hoʻohana 100
+ a i ʻole 500
+.
ʻAʻole mākou paipai i ka hoʻopilikino ʻana i kēia mau waiwai pākahi; inā ʻoe e hoʻololi i hoʻokahi, pono paha ʻoe e hoʻololi iā lākou a pau.
$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;
No ka lawelawe ʻana i nā palena ʻāwili i loko o nā ʻāpana (e laʻa, nā pihi a me nā mea hoʻokomo i nā pūʻulu hoʻokomo), hoʻohana mākou i nā helu helu haʻahaʻa haʻahaʻa z-index
o 1
, 2
, a 3
no ka paʻamau, hover, a me nā kūlana hana. Ma ka hover/focus/active, lawe mākou i kekahi mea i mua me ka z-index
waiwai kiʻekiʻe e hōʻike i ko lākou palena ma luna o nā mea kaikaina.