Source

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 . Valitse reagoiva, kiinteän levyinen säiliö (eli sen max-widthmuutoksia kussakin keskeytyskohdassa) tai nesteen leveys (eli se on 100%koko ajan leveä).

Vaikka säilöjä voidaan upottaa, useimmat asettelut eivät vaadi sisäkkäistä säilöä.

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

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

<div class="container-fluid">
  ...
</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

Huomaa, että koska selaimet eivät tällä hetkellä tue aluekontekstikyselyitä , kiertämme rajoituksia min-sekä max-etuliitteitä ja näkymäportteja murto-osien leveydellä (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-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.