Rutenettsystem
Bruk vårt kraftige mobil-første flexbox-nettverk for å bygge oppsett i alle former og størrelser takket være et tolv kolonnesystem, seks standard responsive nivåer, Sass-variabler og -mikser, og dusinvis av forhåndsdefinerte klasser.
Eksempel
Bootstraps rutenettsystem bruker en serie beholdere, rader og kolonner for å layoute og justere innhold. Den er bygget med flexbox og er fullstendig responsiv. Nedenfor er et eksempel og en utdypende forklaring på hvordan nettsystemet henger sammen.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Eksemplet ovenfor oppretter tre like brede kolonner på tvers av alle enheter og visningsporter ved å bruke våre forhåndsdefinerte rutenettklasser. Disse kolonnene er sentrert på siden med den overordnede .container
.
Hvordan det fungerer
Nedbryting, her er hvordan rutenettsystemet kommer sammen:
-
Vårt rutenett støtter seks responsive bruddpunkter . Knekkpunkter er basert på
min-width
mediespørringer, noe som betyr at de påvirker det bruddpunktet og alle de over det (.col-sm-4
gjelder f.eks.sm
,md
,lg
,xl
, ogxxl
). Dette betyr at du kan kontrollere størrelsen på beholderen og kolonnene og virkemåten etter hvert bruddpunkt. -
Beholdere sentrerer og fyller innholdet ditt horisontalt. Bruk
.container
for en responsiv pikselbredde,.container-fluid
forwidth: 100%
alle visningsporter og enheter, eller en responsiv beholder (f.eks..container-md
) for en kombinasjon av væske- og pikselbredder. -
Rader er omslag for kolonner. Hver søyle har horisontal
padding
(kalt en renne) for å kontrollere avstanden mellom dem. Dettepadding
motvirkes så på radene med negative marger for å sikre at innholdet i kolonnene dine er visuelt justert nedover venstre side. Rader støtter også modifikasjonsklasser for jevnt å bruke kolonnestørrelse og taksteinsklasser for å endre avstanden til innholdet ditt. -
Kolonner er utrolig fleksible. Det er 12 malkolonner tilgjengelig per rad, slik at du kan lage forskjellige kombinasjoner av elementer som spenner over et hvilket som helst antall kolonner. Kolonneklasser indikerer antall malkolonner som skal spennes over (f.eks.
col-4
spenner over fire).width
s er satt i prosenter slik at du alltid har samme relative størrelse. -
Takrenner er også responsive og kan tilpasses. Renneklasser er tilgjengelige på tvers av alle bruddpunkter, med alle de samme størrelsene som vår margin og polstringsavstand . Endre horisontale takrenner med
.gx-*
klasser, vertikale takrenner med.gy-*
, eller alle takrenner med.g-*
klasser..g-0
finnes også for å fjerne takrenner. -
Sass variabler, kart og mixins driver nettet. Hvis du ikke vil bruke de forhåndsdefinerte gridklassene i Bootstrap, kan du bruke grid-kilden Sass for å lage din egen med mer semantisk markering. Vi inkluderer også noen egendefinerte CSS-egenskaper for å konsumere disse Sass-variablene for enda større fleksibilitet for deg.
Vær oppmerksom på begrensningene og feilene rundt flexbox , som manglende evne til å bruke noen HTML-elementer som flex-beholdere .
Rutenettalternativer
Bootstraps rutenettsystem kan tilpasses på tvers av alle seks standardbruddpunktene, og eventuelle bruddpunkter du tilpasser. De seks standard grid-nivåene er som følger:
- Ekstra liten (xs)
- Liten (sm)
- Middels (md)
- Stor (lg)
- Ekstra stor (xl)
- Ekstra ekstra stor (xxl)
Som nevnt ovenfor har hvert av disse bruddpunktene sin egen beholder, unike klasseprefiks og modifikatorer. Her er hvordan rutenettet endres på tvers av disse bruddpunktene:
xs <576px |
sm ≥576 piksler |
md ≥768 piksler |
lg ≥992px |
xl ≥1200px |
xxl ≥1400 piksler |
|
---|---|---|---|---|---|---|
Containermax-width |
Ingen (auto) | 540 piksler | 720 piksler | 960 piksler | 1140 piksler | 1320 piksler |
Klasseprefiks | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
antall kolonner | 12 | |||||
Rennebredde | 1,5 rem (.75 rem på venstre og høyre) | |||||
Tilpassede takrenner | Ja | |||||
Nestbar | Ja | |||||
Kolonnebestilling | Ja |
Auto-layout kolonner
Bruk brytepunktspesifikke kolonneklasser for enkel kolonnestørrelse uten en eksplisitt nummerert klasse som .col-sm-6
.
Lik bredde
Her er for eksempel to rutenettoppsett som gjelder for hver enhet og visningsport, fra xs
til xxl
. Legg til et hvilket som helst antall enhetsløse klasser for hvert bruddpunkt du trenger, og hver kolonne vil ha samme bredde.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Innstilling av én kolonnebredde
Automatisk oppsett for flexbox-rutenettskolonner betyr også at du kan stille inn bredden på én kolonne og få søskensøylene automatisk til å endre størrelsen rundt den. Du kan bruke forhåndsdefinerte rutenettklasser (som vist nedenfor), rutenettblandinger eller inline-bredder. Merk at de andre kolonnene vil endre størrelsen uansett bredden på midtkolonnen.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variabel breddeinnhold
Bruk col-{breakpoint}-auto
klasser til å dimensjonere kolonner basert på den naturlige bredden på innholdet.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Responsive klasser
Bootstraps rutenett inkluderer seks lag med forhåndsdefinerte klasser for å bygge komplekse responsive layouter. Tilpass størrelsen på kolonnene dine på ekstra små, små, mellomstore, store eller ekstra store enheter slik du vil.
Alle bruddpunkter
For rutenett som er like fra den minste enheten til den største, bruk .col
og .col-*
klassene. Angi en nummerert klasse når du trenger en kolonne av særlig størrelse; ellers hold deg gjerne til .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Stablet til vannrett
Ved å bruke et enkelt sett med .col-sm-*
klasser kan du lage et grunnleggende rutenettsystem som starter stablet og blir horisontalt ved det lille bruddpunktet ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mix og match
Vil du ikke at kolonnene dine bare skal stables i noen rutenettlag? Bruk en kombinasjon av forskjellige klasser for hvert nivå etter behov. Se eksemplet nedenfor for en bedre ide om hvordan det hele fungerer.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Rad kolonner
Bruk de responsive .row-cols-*
klassene til raskt å angi antall kolonner som best gjengir innholdet og oppsettet ditt. Mens normale .col-*
klasser gjelder for de individuelle kolonnene (f.eks. .col-md-4
), er radkolonneklassene satt på overordnet .row
som en snarvei. Med .row-cols-auto
kan du gi søylene deres naturlige bredde.
Bruk disse radkolonneklassene for raskt å lage grunnleggende rutenettoppsett eller for å kontrollere kortoppsettene dine.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Du kan også bruke den medfølgende Sass mixin row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Hekking
For å legge innholdet ditt med standardrutenettet, legg til en ny .row
og et sett med .col-sm-*
kolonner i en eksisterende .col-sm-*
kolonne. Nestede rader bør inneholde et sett med kolonner som summerer seg til 12 eller færre (det er ikke nødvendig at du bruker alle de 12 tilgjengelige kolonnene).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
Når du bruker Bootstraps kilde Sass-filer, har du muligheten til å bruke Sass-variabler og mixins for å lage tilpassede, semantiske og responsive sideoppsett. Våre forhåndsdefinerte rutenettklasser bruker de samme variablene og miksene for å gi en hel serie med klar-til-bruk-klasser for raske responsive oppsett.
Variabler
Variabler og kart bestemmer antall kolonner, takrennebredden og mediespørringspunktet der flytende kolonner skal begynne. Vi bruker disse til å generere de forhåndsdefinerte rutenettklassene som er dokumentert ovenfor, så vel som for de tilpassede miksene som er oppført nedenfor.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixins
Mixins brukes sammen med rutenettvariablene for å generere semantisk CSS for individuelle rutenettkolonner.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Eksempel på bruk
Du kan endre variablene til dine egne tilpassede verdier, eller bare bruke mixins med standardverdiene deres. Her er et eksempel på bruk av standardinnstillingene for å lage en to-kolonne layout med et gap mellom.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Tilpasse rutenettet
Ved å bruke våre innebygde rutenett Sass-variabler og kart, er det mulig å tilpasse de forhåndsdefinerte rutenettklassene fullstendig. Endre antall nivåer, mediespørringsdimensjonene og beholderbreddene – og kompiler deretter på nytt.
Søyler og takrenner
Antall rutenettkolonner kan endres via Sass-variabler. $grid-columns
brukes til å generere breddene (i prosent) av hver enkelt søyle mens $grid-gutter-width
den angir bredden for søylerennene.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Rutenettlag
Når du går utover selve kolonnene, kan du også tilpasse antall rutenettlag. Hvis du bare ville ha fire rutenettnivåer, ville du oppdatere $grid-breakpoints
og $container-max-widths
til noe som dette:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Når du gjør endringer i Sass-variablene eller kartene, må du lagre endringene og kompilere på nytt. Hvis du gjør det, vil du få et helt nytt sett med forhåndsdefinerte rutenettklasser for kolonnebredder, forskyvninger og rekkefølge. Responsive synlighetsverktøy vil også bli oppdatert for å bruke de tilpassede bruddpunktene. Sørg for å angi rutenettverdier i px
(ikke rem
, em
, eller %
).