Overzicht
Componenten en opties voor het opmaken van uw Bootstrap-project, inclusief verpakkingscontainers, een krachtig rastersysteem, een flexibel media-object en responsieve hulpprogrammaklassen.
Containers zijn het meest elementaire lay-outelement in Bootstrap en zijn vereist bij gebruik van ons standaardrastersysteem . Kies uit een responsieve container met vaste breedte (wat betekent dat de container max-width
bij elk breekpunt verandert) of vloeiende breedte (wat betekent dat hij 100%
altijd breed is).
Hoewel containers genest kunnen worden, hebben de meeste lay-outs geen geneste container nodig.
Gebruik .container-fluid
voor een container over de volledige breedte, die de volledige breedte van de viewport beslaat.
Omdat Bootstrap is ontwikkeld om eerst mobiel te zijn, gebruiken we een handvol mediaquery's om verstandige breekpunten te creëren voor onze lay-outs en interfaces. Deze breekpunten zijn meestal gebaseerd op minimale viewport-breedtes en stellen ons in staat om elementen op te schalen als de viewport verandert.
Bootstrap gebruikt voornamelijk de volgende mediaquerybereiken (of breekpunten) in onze Sass-bronbestanden voor onze lay-out, rastersysteem en componenten.
Omdat we onze bron-CSS in Sass schrijven, zijn al onze mediaquery's beschikbaar via Sass-mixins:
We gebruiken af en toe mediaquery's die in de andere richting gaan (de gegeven schermgrootte of kleiner ):
Houd er rekening mee dat aangezien browsers momenteel geen bereikcontextquery's ondersteunen , we de beperkingen van min-
en max-
voorvoegsels en viewports met fractionele breedten omzeilen (die onder bepaalde omstandigheden kunnen voorkomen op apparaten met een hoge dpi, bijvoorbeeld) door waarden met een hogere precisie te gebruiken voor deze vergelijkingen .
Nogmaals, deze mediaquery's zijn ook beschikbaar via Sass-mixins:
Er zijn ook mediaquery's en mixins voor het targeten van een enkel segment van schermformaten met behulp van de minimale en maximale breekpuntbreedten.
Deze mediaquery's zijn ook beschikbaar via Sass-mixins:
Evenzo kunnen mediaquery's meerdere breekpuntbreedten omvatten:
De Sass-mix voor het targeten van hetzelfde schermgroottebereik zou zijn:
Verschillende Bootstrap-componenten gebruiken z-index
, de CSS-eigenschap die de lay-out helpt regelen door een derde as te bieden om inhoud te rangschikken. We gebruiken een standaard z-indexschaal in Bootstrap die is ontworpen om navigatie, tooltips en popovers, modals en meer op de juiste manier te lagen.
Deze hogere waarden beginnen bij een willekeurig getal, hoog en specifiek genoeg om conflicten idealiter te vermijden. We hebben een standaardset hiervan nodig voor onze gelaagde componenten - tooltips, popovers, navigatiebalken, vervolgkeuzelijsten, modals - zodat we redelijk consistent kunnen zijn in het gedrag. Er is geen reden waarom we 100
+ of 500
+ niet hadden kunnen gebruiken.
We moedigen aanpassing van deze individuele waarden niet aan; als je er een verandert, moet je ze waarschijnlijk allemaal veranderen.
Om overlappende randen binnen componenten (bijv. knoppen en invoer in invoergroepen) af te handelen, gebruiken we lage eencijferige z-index
waarden van 1
, 2
, en 3
voor standaard-, zweef- en actieve statussen. Bij hover/focus/active brengen we een bepaald element naar de voorgrond met een hogere z-index
waarde om hun grens over de zusterelementen te laten zien.