Yleiskatsaus

Komponentit ja vaihtoehdot Bootstrap-projektisi asetteluun, mukaan lukien pakkaussäiliöt, tehokas ruudukkojärjestelmä, joustava mediaobjekti ja responsiiviset apuohjelmaluokat.

Säiliöt

Säilöt ovat Bootstrapin yksinkertaisin asetteluelementti, ja niitä vaaditaan käytettäessä oletusruudukkojärjestelmäämme . Säiliöitä käytetään sisällön säilyttämiseen, täyttämiseen ja (joskus) keskittämiseen. Vaikka säilöjä voidaan upottaa, useimmat asettelut eivät vaadi sisäkkäistä säilöä.

Bootstrapissa on kolme erilaista konttia:

• .container, joka asettaa a max-width:n jokaiseen reagoivaan keskeytyskohtaan
• .container-fluid, joka on width: 100%kaikissa keskeytyspisteissä
• .container-{breakpoint}, joka on width: 100%määritettyyn keskeytyskohtaan asti

Alla oleva taulukko havainnollistaa kunkin säilön max-widthvertailua alkuperäiseen .containerja .container-fluidkunkin keskeytyskohdan välillä.

Katso ne toiminnassa ja vertaa niitä Grid-esimerkissämme .

Kaikki yhdessä

Oletusluokkamme .containeron responsiivinen, kiinteän levyinen säilö, mikä tarkoittaa, että se max-widthmuuttuu jokaisessa keskeytyskohdassa.

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

Neste

Käytä .container-fluidtäysleveälle säiliölle, joka kattaa koko näkymän leveyden.

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

Responsiivinen

Responsiiviset säilöt ovat uusia Bootstrap v4.4:ssä. Niiden avulla voit määrittää luokan, joka on 100 % leveä, kunnes määritetty keskeytyspiste saavutetaan, minkä jälkeen käytämme max-widths:tä jokaiselle korkeammalle keskeytyspisteelle. Esimerkiksi .container-smon 100 % leveä aloittaakseen, kunnes smkeskeytyspiste saavutetaan, jolloin se skaalautuu 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>

Responsiiviset keskeytyskohdat

Koska Bootstrap on kehitetty ensisijaisesti mobiilikäyttöön, käytämme kourallista mediakyselyitä luodaksemme järkeviä keskeytyskohtia asetteluillemme ja käyttöliittymillemme. Nämä keskeytyskohdat perustuvat enimmäkseen näkymän vähimmäisleveyksiin, ja niiden avulla voimme skaalata elementtejä näkymän muuttuessa.

Bootstrap käyttää ensisijaisesti seuraavia mediakyselyalueita – tai keskeytyskohtia – Sass-lähdetiedostoissamme asettelua, ruudukkojärjestelmää ja komponentteja varten.

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

Koska kirjoitamme lähde-CSS:n Sassilla, kaikki mediakyselymme ovat saatavilla Sass-mixinien kautta:

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

Käytämme toisinaan mediakyselyitä, jotka menevät toiseen suuntaan (annettu näytön koko tai pienempi ):

// 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älleen kerran nämä mediakyselyt ovat saatavilla myös Sass-mixinien kautta:

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

On myös mediakyselyitä ja sekoituksia kohdistamiseen yhteen näyttökokosegmenttiin käyttämällä keskeytyskohdan vähimmäis- ja enimmäisleveyttä.

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

Nämä mediakyselyt ovat saatavilla myös Sass-mixinien kautta:

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

Samoin mediakyselyt voivat kattaa useita keskeytyspisteiden leveyksiä:

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

Sass-sekoitus samalle näytön kokoalueelle kohdistamiseksi olisi:

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

Z-indeksi

Useat Bootstrap-komponentit käyttävät z-indexCSS-ominaisuutta, joka auttaa hallitsemaan asettelua tarjoamalla kolmannen akselin sisällön järjestämiseen. Käytämme Bootstrapissa oletusarvoista z-indeksiasteikkoa, joka on suunniteltu tasoittamaan navigointi, työkaluvihjeet ja ponnahdusikkunat, modaalit ja paljon muuta.

Nämä korkeammat arvot alkavat mielivaltaisesta numerosta, korkeasta ja riittävän täsmällisestä välttääkseen ristiriidat. Tarvitsemme vakiojoukon näitä kerroksellisissa komponenteissamme – työkaluvihjeissä, ponnahdusikkunoissa, navigointipalkissa, pudotusvalikoissa, modaaleissa – jotta voimme olla kohtuullisen johdonmukaisia ​​käyttäytymisessämme. Ei ole mitään syytä, miksi emme olisi voineet käyttää 100+ tai 500+.

Emme rohkaise räätälöimään näitä yksilöllisiä arvoja; Jos muutat yhden, sinun on todennäköisesti vaihdettava ne kaikki.

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

Käsittelemme päällekkäisiä rajoja komponenttien sisällä (esim. painikkeet ja tulot syöttöryhmissä) käytämme alhaisia ​​yksinumeroisia z-indexarvoja 1, 2ja 3oletus-, hover- ja aktiivitiloissa. Kohdassa hover/focus/active tuomme tietyn elementin etualalle korkeammalla z-indexarvolla näyttääksemme sen reunan sisarelementtien yläpuolella.