Ɔ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

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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