Oversigt
Komponenter og muligheder for at udforme dit Bootstrap-projekt, herunder indpakning af beholdere, et kraftfuldt gittersystem, et fleksibelt medieobjekt og responsive hjælpeklasser.
Containere
Containere er det mest basale layoutelement i Bootstrap og er påkrævet, når du bruger vores standard gittersystem . Containere bruges til at indeholde, polstre og (nogle gange) centrere indholdet i dem. Selvom containere kan indlejres, kræver de fleste layouts ikke en indlejret container.
Bootstrap leveres med tre forskellige beholdere:
.container
, som indstiller amax-width
ved hvert responsivt brudpunkt.container-fluid
, som erwidth: 100%
på alle brudpunkter.container-{breakpoint}
, hvilket erwidth: 100%
indtil det angivne brudpunkt
Tabellen nedenfor illustrerer, hvordan hver beholder er max-width
sammenlignet med originalen .container
og .container-fluid
på tværs af hvert brudpunkt.
Se dem i aktion, og sammenlign dem i vores Grid-eksempel .
Ekstra lille <576px |
Lille ≥576 px |
Medium ≥768 px |
Stor ≥992px |
Ekstra stor ≥1200px |
|
---|---|---|---|---|---|
.container |
100 % | 540 px | 720px | 960px | 1140px |
.container-sm |
100 % | 540 px | 720px | 960px | 1140px |
.container-md |
100 % | 100 % | 720px | 960px | 1140px |
.container-lg |
100 % | 100 % | 100 % | 960px | 1140px |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140px |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % |
Alt i en
Vores standardklasse .container
er en responsiv container med fast bredde, hvilket betyder, at dens max-width
ændringer ved hvert brudpunkt.
<div class="container">
<!-- Content here -->
</div>
Væske
Bruges .container-fluid
til en beholder i fuld bredde, der spænder over hele visningsportens bredde.
<div class="container-fluid">
...
</div>
Lydhør
Responsive containere er nye i Bootstrap v4.4. De giver dig mulighed for at angive en klasse, der er 100 % bred, indtil det angivne brudpunkt er nået, hvorefter vi anvender max-width
s for hvert af de højere brudpunkter. For eksempel .container-sm
er den 100 % bred for at starte, indtil sm
brudpunktet er nået, hvor den skaleres op med md
, lg
, og 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>
Responsive brudpunkter
Da Bootstrap er udviklet til at være mobil først, bruger vi en håndfuld medieforespørgsler til at skabe fornuftige brudpunkter for vores layout og grænseflader. Disse brudpunkter er for det meste baseret på minimum viewport-bredder og giver os mulighed for at skalere elementer op, efterhånden som viewporten ændres.
Bootstrap bruger primært følgende medieforespørgselsområder – eller brudpunkter – i vores Sass-kildefiler til vores layout, gittersystem og komponenter.
// 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) { ... }
Da vi skriver vores kilde-CSS i Sass, er alle vores medieforespørgsler tilgængelige via Sass-mixins:
// 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;
}
}
Vi bruger lejlighedsvis medieforespørgsler, der går i den anden retning (den givne skærmstørrelse eller mindre ):
// 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-
og max-
præfikser og visningsporte med brøkbredder (som kan forekomme under visse forhold på f.eks. højdpi-enheder) ved at bruge værdier med højere præcision til disse sammenligninger .
Endnu en gang er disse medieforespørgsler også tilgængelige via Sass mixins:
@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;
}
}
Der er også medieforespørgsler og mixins til at målrette mod et enkelt segment af skærmstørrelser ved brug af minimums- og maksimumsbrudpunktsbredderne.
// 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) { ... }
Disse medieforespørgsler er også tilgængelige via Sass mixins:
@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) { ... }
På samme måde kan medieforespørgsler strække sig over flere brudpunktsbredder:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Sass-blandingen til at målrette mod det samme skærmstørrelsesområde ville være:
@include media-breakpoint-between(md, xl) { ... }
Z-indeks
Adskillige Bootstrap-komponenter bruger z-index
, CSS-egenskaben, der hjælper med at kontrollere layoutet ved at give en tredje akse til at arrangere indhold. Vi bruger en standard z-indeksskala i Bootstrap, der er designet til korrekt lagnavigation, værktøjstip og popovers, modaler og mere.
Disse højere værdier starter ved et vilkårligt tal, højt og specifikt nok til ideelt set at undgå konflikter. Vi har brug for et standardsæt af disse på tværs af vores lagdelte komponenter – værktøjstip, popovers, navbarer, dropdowns, modaler – så vi kan være rimelig konsekvente i adfærden. Der er ingen grund til, at vi ikke kunne have brugt 100
+ eller 500
+.
Vi opfordrer ikke til tilpasning af disse individuelle værdier; skulle du ændre en, skal du sandsynligvis ændre dem alle.
$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;
For at håndtere overlappende grænser inden for komponenter (f.eks. knapper og input i inputgrupper), bruger vi lave enkeltcifrede z-index
værdier af 1
, 2
, og 3
som standard, hover og aktive tilstande. På hover/focus/active bringer vi et bestemt element i forgrunden med en højere z-index
værdi for at vise deres grænse over søskendeelementerne.