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, fem standard responsive nivåer, Sass-variabler og -mikser, og dusinvis av forhåndsdefinerte klasser.

Hvordan det fungerer

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 grundig titt på hvordan rutenettet kommer sammen.

Ny eller ukjent med flexbox? Les denne CSS Tricks flexbox-guiden for bakgrunn, terminologi, retningslinjer og kodebiter.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Eksemplet ovenfor oppretter tre like brede kolonner på små, mellomstore, store og ekstra store enheter ved å bruke våre forhåndsdefinerte rutenettklasser. Disse kolonnene er sentrert på siden med den overordnede .container.

Nedbryting, slik fungerer det:

• Beholdere gir et middel til å sentrere innholdet på nettstedet ditt horisontalt. Bruk .containerfor en responsiv pikselbredde eller .container-fluidfor width: 100%alle visningsporter og enhetsstørrelser.
• Rader er omslag for kolonner. Hver søyle har horisontal padding(kalt en renne) for å kontrollere avstanden mellom dem. Dette paddingmotvirkes så på radene med negative marginer. På denne måten er alt innholdet i kolonnene dine visuelt justert nedover venstre side.
• I et rutenettoppsett må innhold plasseres i kolonner, og bare kolonner kan være umiddelbare underordnede rader.
• Takket være flexbox vil rutenettskolonner uten spesifisert widthautomatisk layout ha samme bredde kolonner. For eksempel vil fire forekomster av .col-smhver automatisk være 25 % bred fra det lille bruddpunktet og oppover. Se delen for kolonner for automatisk layout for flere eksempler.
• Kolonneklasser angir antall kolonner du vil bruke av de mulige 12 per rad. Så hvis du vil ha tre like brede kolonner på tvers, kan du bruke .col-4.
• Kolonne widther satt i prosenter, slik at de alltid er flytende og i størrelse i forhold til det overordnede elementet.
• Kolonner har horisontale paddingfor å lage rennene mellom individuelle kolonner, men du kan fjerne marginfra rader og paddingfra kolonner med .no-gutterspå .row.
• For å gjøre rutenettet responsivt, er det fem rutenettbruddpunkter, ett for hvert responsivt bruddpunkt : alle bruddpunkter (ekstra små), små, middels, store og ekstra store.
• Rutenettbruddpunkter er basert på mediespørringer med minimumsbredde, noe som betyr at de gjelder for det ene bruddpunktet og alle de over det ( .col-sm-4gjelder f.eks. små, mellomstore, store og ekstra store enheter, men ikke det første xsbruddpunktet).
• Du kan bruke forhåndsdefinerte rutenettklasser (som .col-4) eller Sass-mikser for mer semantisk markering.

Vær oppmerksom på begrensningene og feilene rundt flexbox , som manglende evne til å bruke noen HTML-elementer som flex-beholdere .

Rutenettalternativer

Mens Bootstrap bruker ems eller rems for å definere de fleste størrelser, pxbrukes s for grid breakpoints og containerbredder. Dette er fordi visningsportens bredde er i piksler og ikke endres med skriftstørrelsen .

Se hvordan aspekter av Bootstrap-rutenettsystemet fungerer på tvers av flere enheter med en hendig tabell.

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 xstil xl. 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>

Kolonner med lik bredde kan deles inn i flere linjer, men det var en Safari flexbox-feil som hindret dette i å fungere uten en eksplisitt flex-basiseller border. Det finnes løsninger for eldre nettleserversjoner, men de burde ikke være nødvendige hvis du er oppdatert.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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}-autoklasser 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>

Flerrader med lik bredde

Lag kolonner med lik bredde som spenner over flere rader ved å sette inn en .w-100der du vil at kolonnene skal brytes til en ny linje. Gjør pausene responsive ved å blande dem .w-100med noen responsive display-verktøy .

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Responsive klasser

Bootstraps rutenett inkluderer fem 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 .colog .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="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>

Stablet til vannrett

Ved å bruke et enkelt sett med .col-sm-*klasser kan du lage et grunnleggende rutenettsystem som starter stablet før det blir horisontalt med det lille bruddpunktet ( sm).

<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>

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.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Justering

Bruk flexbox-justeringsverktøy for å justere kolonner vertikalt og horisontalt.

Vertikal justering

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horisontal justering

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Ingen takrenner

Rennene mellom søyler i våre forhåndsdefinerte rutenettklasser kan fjernes med .no-gutters. Dette fjerner negative margins fra .rowog horisontale paddingfra alle umiddelbare underordnede kolonner.

Her er kildekoden for å lage disse stilene. Vær oppmerksom på at kolonneoverstyringer kun omfatter de første underordnede kolonnene og målrettes via attributtvelgeren . Selv om dette genererer en mer spesifikk velger, kan kolonneutfylling fortsatt tilpasses ytterligere med avstandsverktøy .

Trenger du et kant-til-kant-design? Slipp forelderen .containereller .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

I praksis ser det slik ut. Merk at du kan fortsette å bruke dette med alle andre forhåndsdefinerte rutenettklasser (inkludert kolonnebredder, responsive nivåer, ombestillinger og mer).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Kolonneinnpakning

Hvis mer enn 12 kolonner er plassert innenfor en enkelt rad, vil hver gruppe ekstra kolonner, som én enhet, pakkes inn på en ny linje.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Kolonneskift

Å bryte kolonner til en ny linje i flexbox krever et lite hack: legg til et element med width: 100%hvor du vil pakke kolonnene til en ny linje. Normalt oppnås dette med flere .rows, men ikke alle implementeringsmetoder kan ta hensyn til dette.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Du kan også bruke denne pausen ved spesifikke pausepunkter med våre responsive displayverktøy .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Ombestilling

Bestill klasser

Bruk .order-klasser for å kontrollere den visuelle rekkefølgen på innholdet ditt. Disse klassene er responsive, så du kan angi orderetter bruddpunkt (f.eks. .order-1.order-md-2). Inkluderer støtte for 1gjennomgående 12på tvers av alle fem rutenettlagene.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Det er også responsive .order-firstog .order-lastklasser som endrer orderelementet ved å bruke henholdsvis order: -1og order: 13( order: $columns + 1). Disse klassene kan også blandes med de nummererte .order-*klassene etter behov.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Forskyvning av kolonner

Du kan forskyve rutenettkolonner på to måter: våre responsive .offset-rutenettklasser og våre marginverktøy . Rutenettklasser er dimensjonert for å matche kolonner, mens marginer er mer nyttige for raske oppsett der bredden på forskyvningen er variabel.

Offsetklasser

Flytt kolonner til høyre ved å bruke .offset-md-*klasser. Disse klassene øker venstre marg i en kolonne med *kolonner. .offset-md-4Flytter for eksempel .col-md-4over fire kolonner.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

I tillegg til kolonnetømming ved responsive bruddpunkter, kan det hende du må tilbakestille forskyvninger. Se dette i aksjon i rutenetteksemplet .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Marginverktøy

Med overgangen til flexbox i v4 kan du bruke marginverktøy som .mr-autoå tvinge søskenkolonner bort fra hverandre.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Hekking

For å legge innholdet ditt med standardrutenettet, legg til en ny .rowog 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="row">
  <div class="col-sm-9">
    Level 1: .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>

Sass blandinger

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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Eksempel 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 {
  width: 800px;
  @include make-container();
}

.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-columnsbrukes til å generere breddene (i prosent) av hver enkelt kolonne, samtidig $grid-gutter-widthsom det tillater bruddpunktspesifikke bredder som er delt jevnt på tvers padding-leftog padding-rightfor kolonnerennene.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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-breakpointsog $container-max-widthstil 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 %).