Pārskats

Komponenti un opcijas jūsu Bootstrap projekta izkārtojumam, tostarp iesaiņošanas konteineri, jaudīga režģa sistēma, elastīgs multivides objekts un atsaucīgas utilītas klases.

Konteineri

Konteineri ir visvienkāršākais Bootstrap izkārtojuma elements, un tie ir nepieciešami, izmantojot mūsu noklusējuma režģa sistēmu . Konteineri tiek izmantoti, lai saturētu tajos, ievietotu tos un (dažreiz) centrētu tos. Lai gan konteinerus var ligzdot, lielākajai daļai izkārtojumu nav nepieciešams ligzdots konteiners.

Bootstrap komplektācijā ietilpst trīs dažādi konteineri:

• .container, kas iestata a max-widthkatrā adaptīvajā pārtraukuma punktā
• .container-fluid, kas ir width: 100%visos pārtraukuma punktos
• .container-{breakpoint}, kas ir width: 100%līdz norādītajam pārtraukuma punktam

Tālāk esošajā tabulā ir parādīts, kā katrs konteiners ir max-widthsalīdzināms ar sākotnējo .containerun .container-fluidkatrā pārtraukuma punktā.

Skatiet tos darbībā un salīdziniet tos mūsu režģa piemērā .

Viss vienā

Mūsu noklusējuma .containerklase ir adaptīvs, fiksēta platuma konteiners, kas nozīmē, ka tā max-widthmainās katrā pārtraukuma punktā.

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

Šķidrums

Izmantojiet .container-fluidpilna platuma konteineram, kas aptver visu skatvietas platumu.

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

Atsaucīgs

Adaptīvie konteineri ir jauni operētājsistēmā Bootstrap v4.4. Tie ļauj norādīt klasi, kas ir 100% plata, līdz tiek sasniegts norādītais pārtraukuma punkts, pēc kura mēs piemērojam max-widths katram no augstākajiem pārtraukuma punktiem. Piemēram, .container-smir 100% plats, lai sāktu, līdz smtiek sasniegts pārtraukuma punkts, kur tas tiks palielināts ar md, lg, un 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>

Atsaucīgi pārtraukuma punkti

Tā kā Bootstrap vispirms ir izstrādāts, lai tas būtu mobilais, mēs izmantojam dažus multivides vaicājumus , lai izveidotu saprātīgus pārtraukuma punktus mūsu izkārtojumiem un saskarnēm. Šie pārtraukuma punkti galvenokārt ir balstīti uz minimālo skata loga platumu un ļauj mums palielināt elementus, mainoties skata logam.

Bootstrap mūsu izkārtojumam, režģa sistēmai un komponentiem mūsu avota Sass failos galvenokārt izmanto šādus multivides vaicājumu diapazonus vai pārtraukumpunktus.

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

Tā kā avota CSS mēs rakstām Sass, visi mūsu multivides vaicājumi ir pieejami, izmantojot 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;
  }
}

Mēs laiku pa laikam izmantojam multivides vaicājumus, kas virzās citā virzienā (norādītais ekrāna izmērs vai mazāks ):

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

Arī šie multivides vaicājumi ir pieejami, izmantojot 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;
  }
}

Ir arī multivides vaicājumi un kombinācijas, lai atlasītu vienu ekrāna izmēru segmentu, izmantojot minimālo un maksimālo pārtraukumpunkta platumu.

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

Šie multivides vaicājumi ir pieejami arī, izmantojot 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) { ... }

Līdzīgi multivides vaicājumi var aptvert vairākus pārtraukuma punktu platumus:

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

Sass mikss, lai atlasītu vienu un to pašu ekrāna izmēru diapazonu, būtu:

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

Z-indekss

Vairāki Bootstrap komponenti izmanto z-indexCSS īpašumu, kas palīdz kontrolēt izkārtojumu, nodrošinot trešo asi satura sakārtošanai. Mēs izmantojam noklusējuma z-indeksa skalu programmā Bootstrap, kas ir izstrādāta, lai pareizi sakārtotu navigāciju, rīka padomus un uznirstošos logus, modālus un daudz ko citu.

Šīs augstākās vērtības sākas ar patvaļīgu skaitli, kas ir pietiekami augsts un specifisks, lai ideālā gadījumā izvairītos no konfliktiem. Mums ir nepieciešams to standarta komplekts mūsu slāņainajos komponentos — rīka padomiem, uznirstošajiem logiem, navigācijas joslām, nolaižamajām izvēlnēm, modāliem — lai mēs varētu būt pietiekami konsekventi savā darbībā. Nav iemesla, kāpēc mēs nevarētu izmantot 100+ vai 500+.

Mēs neatbalstām šo individuālo vērtību pielāgošanu; ja mainīsit vienu, iespējams, būs jāmaina visi.

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

Lai apstrādātu pārklājošās apmales komponentos (piem., pogas un ievades ievades grupās), mēs izmantojam zemas viencipara z-indexvērtības 1, 2un 3noklusējuma, kursora novietošanas un aktīvajiem stāvokļiem. Novietojot kursoru/fokusu/aktīvu, mēs izvirzām konkrētu elementu priekšplānā ar augstāku z-indexvērtību, lai parādītu tā robežu pār elementiem, kas saistīti ar brāli.