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

The Sass mixin for targeting the same screen size range would be:

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

Z-index

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;

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.