Source

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 . Izvēlieties adaptīvu, fiksēta platuma konteineru (tas nozīmē, ka tas max-widthmainās katrā pārtraukuma punktā) vai šķidruma platumu (tas nozīmē, ka tas 100%visu laiku ir plats).

Lai gan konteinerus var ligzdot, lielākajai daļai izkārtojumu nav nepieciešams ligzdots konteiners.

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

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

<div class="container-fluid">
  ...
</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 jeb 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

Ņemiet vērā: tā kā pārlūkprogrammas pašlaik neatbalsta diapazona konteksta vaicājumus , mēs apstrādājam ierobežojumus, min-prefiksus max-un skatu logus ar daļveida platumu (kas var rasties noteiktos apstākļos, piemēram, augstas izšķirtspējas ierīcēs), izmantojot šiem salīdzinājumiem vērtības ar lielāku precizitāti. .

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