Ü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 . Konteinereid kasutatakse nende sees oleva sisu mahutamiseks, polsterdamiseks ja (mõnikord) tsentreerimiseks. Kuigi konteinereid saab pesastada, ei vaja enamik paigutusi pesastatud konteinerit.

Bootstrapil on kolm erinevat konteinerit:

• .container, mis määrab max-widthigale reageerivale murdepunktile a
• .container-fluid, mis on width: 100%kõigis murdepunktides
• .container-{breakpoint}, mis on width: 100%kuni määratud katkestuspunktini

Allolev tabel illustreerib iga konteineri max-widthvõrdlust originaaliga .containerja .container-fluidiga katkestuspunkti lõikes.

Vaadake neid töös ja võrrelge neid meie ruudustiku näites .

Kõik ühes

Meie vaikeklass .containeron tundlik fikseeritud laiusega konteiner, mis tähendab, et see max-widthmuutub igas katkestuspunktis.

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

Vedelik

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

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

Vastutulelik

Reageerivad konteinerid on versioonis Bootstrap v4.4 uued. Need võimaldavad teil määrata klassi, mis on 100% lai, kuni on saavutatud määratud katkestuspunkt, misjärel rakendame max-widths-i iga kõrgema murdepunkti jaoks. Näiteks .container-smon 100% lai, et alustada kuni smkatkestuspunktini, kus seda suurendatakse md, lg, ja 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>

Reageerivad katkestuspunktid

Kuna Bootstrap on esmalt välja töötatud 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 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) { ... }

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

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

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

Samuti on olemas meediumipäringud ja segud ühe ekraanisuuruste 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 mõistlikult järjekindlad olla. 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õljutus-/fookus-/aktiivne-režiimis toome konkreetse elemendi esiplaanile kõrgema z-indexväärtusega, et näidata nende piire õdede elementide kohal.