Yleiskatsaus
Komponentit ja vaihtoehdot Bootstrap-projektisi asetteluun, mukaan lukien pakkaussäiliöt, tehokas ruudukkojärjestelmä, joustava mediaobjekti ja responsiiviset apuohjelmaluokat.
Kontit
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 amax-width
:n jokaiseen reagoivaan keskeytyskohtaan.container-fluid
, joka onwidth: 100%
kaikissa keskeytyspisteissä.container-{breakpoint}
, joka onwidth: 100%
määritettyyn keskeytyskohtaan asti
Alla oleva taulukko havainnollistaa kunkin säilön max-width
vertailua alkuperäiseen .container
ja .container-fluid
kunkin keskeytyskohdan välillä.
Katso ne toiminnassa ja vertaa niitä Grid-esimerkissämme .
Erittäin pieni <576px |
Pieni ≥ 576 pikseliä |
Keskikokoinen ≥ 768 kuvapistettä |
Suuri ≥ 992 pikseliä |
Erittäin suuri ≥1200px |
|
---|---|---|---|---|---|
.container |
100 % | 540 pikseliä | 720 pikseliä | 960 pikseliä | 1140 pikseliä |
.container-sm |
100 % | 540 pikseliä | 720 pikseliä | 960 pikseliä | 1140 pikseliä |
.container-md |
100 % | 100 % | 720 pikseliä | 960 pikseliä | 1140 pikseliä |
.container-lg |
100 % | 100 % | 100 % | 960 pikseliä | 1140 pikseliä |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140 pikseliä |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % |
Kaikki yhdessä
Oletusluokkamme .container
on responsiivinen, kiinteän levyinen säilö, mikä tarkoittaa, että se max-width
muuttuu jokaisessa keskeytyskohdassa.
<div class="container">
<!-- Content here -->
</div>
Neste
Käytä .container-fluid
tä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-width
s:tä jokaiselle korkeammalle keskeytyspisteelle. Esimerkiksi .container-sm
on 100 % leveä aloittaakseen, kunnes sm
keskeytyspiste 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
min-
etuliitteitä max-
ja näkymäportteja murto-osien leveyksillä (joita voi esiintyä tietyissä olosuhteissa esimerkiksi korkean dpi:n laitteissa) käyttämällä tarkempia arvoja näihin vertailuihin. .
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-index
CSS-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, navigointipalkeissa, 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-index
arvoja 1
, 2
ja 3
oletus-, hover- ja aktiivitiloissa. Kohdassa hover/focus/active tuomme tietyn elementin etualalle korkeammalla z-index
arvolla näyttääksemme sen reunan sisarelementtien yläpuolella.