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 kahi max-widthma kēlā me kēia haʻihaʻi pane
• .container-fluid, aia width: 100%ma nā wahi haʻihaʻi a pau
• .container-{breakpoint}, ʻo ia width: 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-widthme ka mea kumu .containera .container-fluidma 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 .

All-in-one

ʻO kā mākou papa paʻamau .containerhe pahu pane, paʻa-ākea, ʻo ia hoʻi kona mau max-widthloli i kēlā me kēia breakpoint.

<div class="container">
  <!-- Content here -->
</div>

Waiwai

E hoʻohana .container-fluidno 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 max-widths no kēlā me kēia o nā wahi haʻi kiʻekiʻe. No ka laʻana, .container-smhe 100% ka laulā e hoʻomaka ai a hiki i ka smhaʻ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

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-indexo 1, 2, a 3no 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-indexwaiwai kiʻekiʻe e hōʻike i ko lākou palena ma luna o nā mea kaikaina.