Ɔvaviu fɔ di Baybul

Komponent ɛn opshɔn fɔ layt ɔut yu Bootstrap projɛkt, inklud wrap kɔntena dɛn, wan pawaful grid sistem, wan fleksibul midia ɔbjɛkt, ɛn rispɔnsiv yutiliti klas dɛn.

Kɔntinɛnt dɛn

Kɔntinɛnt na di mɔs besik layout ɛlimɛnt na Bootstrap ɛn dɛn nid dɛn we yu de yuz wi difɔlt grid sistem . Dɛn kin yuz kɔntena fɔ kɔntinyu, pad, ɛn (sɔntɛnde) sɛnt di tin dɛn we de insay dɛn. Pan ɔl we dɛn kin nest kɔntena dɛn, bɔku pan di layout dɛn nɔ nid kɔntena we dɛn nest.

Bootstrap kam wit tri difrɛn kɔntena dɛn:

• .container, we de sɛt a max-widthna ɛni rispɔnsiv brekpɔynt
• .container-fluid, we width: 100%na ɔl di say dɛn we dɛn kin brok
• .container-{breakpoint}, we na width: 100%te di brekpoint we dɛn dɔn tɔk bɔt

Di tebul we de dɔŋ ya de sho aw ɛni kɔntena in dɛn max-widthkɔmpia to di fɔs wan .containerɛn .container-fluidakɔdin to ɛni brek pɔynt.

Si dɛn insay akshɔn ɛn kɔmpia dɛn na wi Grid ɛgzampul .

Ɔl-in-wan

Wi difɔlt .containerklas na kɔntena we de ansa, we gɛt fiks-wid, we min se i de max-widthchenj na ɛni brek pɔynt.

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

Wata-wata

Yuz .container-fluidfɔ wan ful wit kɔntena, we de span di wan ol wit fɔ di viupɔt.

<div class="container-fluid">
  ...
</div>

Fɔ ansa

Respɔnsiv kɔntena dɛn na nyu tin dɛn na Bootstrap v4.4. Dɛn de alaw yu fɔ spɛsifa wan klas we 100% waid te di spɛsifikɛd brekpɔynt rich, afta dat wi de aplay max-widths fɔ ɛni wan pan di ay brekpɔynt dɛn. Fɔ ɛgzampul, .container-smna 100% waid fɔ stat te di smbrek pɔynt rich, usay i go skel ɔp wit md, lg, ɛn 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>

Brekpoint dɛn we de ansa

Bikɔs dɛn dɔn mek Bootstrap fɔ bi mobayl fɔs, wi de yuz wan anful midia kwɛstyɔn dɛn fɔ mek sɛnsful brekpɔynt dɛn fɔ wi layout ɛn intafays dɛn. Dɛn brekpɔynt ya mɔs bies pan di minimum viupɔt wit ɛn dɛn de alaw wi fɔ skel ɔp ɛlimɛnt dɛn as di viupɔt de chenj.

Bootstrap de yuz di fɔs midia kwɛstyɔn rɛnj dɛn—ɔ brekpɔynt dɛn—insay wi sɔs Sass fayl dɛn fɔ wi layout, grid sistem, ɛn kɔmpɔnɛnt dɛn.

// 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) { ... }

Sins wi rayt wi sɔs CSS na Sass, ɔl wi midia kwɛstyɔn dɛn de via 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;
  }
}

Wan wan tɛm wi kin yuz midia kwɛstyɔn dɛn we kin go na di ɔda say (di skrin saiz we dɛn gi ɔ di smɔl wan ):

// 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

Wans bak, dɛn midia kwɛstyɔn ya de bak bay 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;
  }
}

I gɛt bak midia kwɛstyɔn ɛn miksin fɔ tɔch wan singl sɛgmɛnt pan skrin saiz dɛn we de yuz di minim ɛn maksimal brekpɔynt wit.

// 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) { ... }

Dɛn midia kwɛstyɔn ya de bak bay 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) { ... }

Semweso, midia kwɛstyɔn dɛn kin span bɔku bɔku brekpɔynt wit dɛn:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Di Sass mixin fɔ target di sem skrin saiz rɛnj go bi:

@include media-breakpoint-between(md, xl) { ... }

Z-indeks

Bɔku Bootstrap kɔmpɔnɛnt dɛn de yuz z-index, di CSS prɔpati we de ɛp fɔ kɔntrol layout bay we i de gi wan tɔd aks fɔ arenj kɔntinyu. Wi de yuz wan difɔlt z-indeks skel na Bootstrap we dɛn dɔn mek fɔ layt nevigishɔn, tultips ɛn popovers, modals, ɛn mɔ fayn fayn wan.

Dɛn ay valyu ya kin stat pan wan arbitri nɔmba, ay ɛn spɛshal inof fɔ ideally avɔyd kɔnflikt. Wi nid wan standad sɛt fɔ dɛn wan ya akɔdin to wi layt kɔmpɔnɛnt dɛn—tultips, popovers, navbars, dropdowns, modals—so wi kin rili kɔnsistɛnt insay di bihayvya dɛn. No rizin nɔ de fɔ mek wi nɔ bin fɔ dɔn yuz 100+ ɔ 500+.

Wi nɔ de ɛnkɔrej fɔ kɔstɔmayt dɛn wan wan valyu dɛn ya; if yu chenj wan, yu go mɔs nid fɔ chenj dɛn ɔl.

$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;

Fɔ handel ɔvalap bɔda dɛn insay kɔmpɔnɛnt dɛn (ɛgz., bɔtin ɛn input dɛn na input grup dɛn), wi de yuz lɔw singl dijit z-indexvalyu dɛn fɔ 1, 2, ɛn 3fɔ difɔlt, hova, ɛn aktiv stet dɛn. Na hover/focus/active, wi de bring wan patikyula elemɛnt to di fɔs wan wit wan ay z-indexvalyu fɔ sho dɛn bɔda oba di brɔda ɛn sista ɛlimɛnt dɛn.