Ülevaade

Komponendid ja valikud teie Bootstrapi projekti paigutuseks, sealhulgas pakkimiskonteinerid, võimas ruudustikusüsteem, paindlik meediumiobjekt ja reageerivad utiliidiklassid.

Konteinerid

Konteinerid on Bootstrapi kõige elementaarsem paigutuselement ja need on vajalikud meie vaikevõrgusüsteemi kasutamisel . Valige tundlik, fikseeritud laiusega konteiner (see tähendab, et see max-widthmuutub igas katkestuspunktis) või vedeliku laiusega konteiner (see tähendab, et see on 100%kogu aeg lai).

Kuigi konteinereid saab pesastada, ei vaja enamik paigutusi pesastatud konteinerit.

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

Kasutage .container-fluidtäislaiuse konteineri jaoks, mis katab kogu vaateava laiuse.

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

Reageerivad murdepunktid

Kuna Bootstrap on välja töötatud esmalt mobiilseks, kasutame oma paigutuste ja liideste jaoks mõistlike katkestuspunktide loomiseks käputäis meediumipäringuid . Need katkestuspunktid põhinevad enamasti minimaalsel vaateava laiusel ja võimaldavad meil vaateava muutudes elemente suurendada.

Bootstrap kasutab meie paigutuse, ruudustikusüsteemi ja komponentide jaoks meie Sassi lähtefailides peamiselt järgmisi meediumipäringu vahemikke või murdepunkte.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Kuna kirjutame oma lähte-CSS-i Sassis, on kõik meie meediumipäringud saadaval Sassi segude kaudu:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Aeg-ajalt kasutame meediumipäringuid, mis lähevad teises suunas (antud ekraanisuurus või väiksem ):

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

Jällegi on need meediumipäringud saadaval ka Sassi miksinide kaudu:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Samuti on olemas meediumipäringud ja segud ühe ekraanisuuruse segmendi sihtimiseks, kasutades minimaalset ja maksimaalset murdepunkti laiust.

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

Need meediumipäringud on saadaval ka Sassi segude kaudu:

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

Samamoodi võivad meediumipäringud hõlmata mitut murdepunkti laiust:

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

Sassi miksin sama ekraanisuuruse vahemiku sihtimiseks oleks järgmine:

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

Z-indeks

Mitmed Bootstrapi komponendid kasutavad z-indexCSS-i atribuuti, mis aitab juhtida paigutust, pakkudes sisu korraldamiseks kolmandat telge. Kasutame Bootstrapis vaikimisi z-indeksi skaalat, mis on loodud navigeerimise, tööriistaspikrite ja hüpikaknate, modaalide ja muu õigeks kihistamiseks.

Need kõrgemad väärtused algavad suvalisest arvust, mis on piisavalt kõrged ja piisavalt spetsiifilised, et ideaalis vältida konflikte. Vajame nende standardset komplekti kõigis oma kihilistes komponentides – tööriistaspikrid, hüpikaknad, navigeerimisribad, rippmenüüd, modaalid –, et saaksime käitumises olla mõistlikult järjekindlad. Pole põhjust, miks me ei oleks saanud kasutada 100+ või 500+.

Me ei julgusta nende individuaalsete väärtuste kohandamist; Kui peaksite ühte muutma, peate tõenäoliselt muutma need kõik.

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

Komponentide (nt nupud ja sisendid sisendrühmades) kattuvate ääriste käsitlemiseks kasutame madalaid ühekohalisi z-indexväärtusi 1, 2ja 3vaike-, hõljutus- ja aktiivsete olekute jaoks. Hõljutamise/fookuse/aktiivse režiimis toome konkreetse elemendi esiplaanile kõrgema z-indexväärtusega, et näidata nende piirjoont õdede elementide kohal.