Rutenettsystem

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 text-center">
  <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-widthmediespørringer, noe som betyr at de påvirker det bruddpunktet og alle de over det ( .col-sm-4gjelder f.eks. sm, md, lg, xl, og xxl). 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 .containerfor en responsiv pikselbredde, .container-fluidfor width: 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. Dette paddingmotvirkes 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-4spenner over fire). widths 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-0finnes 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:

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 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 text-center">
  <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 text-center">
  <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 text-center">
  <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 .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="container text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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 .rowsom en snarvei. Med .row-cols-autokan du gi søylene deres naturlige bredde.

Bruk disse radkolonneklassene for raskt å lage grunnleggende rutenettoppsett eller for å kontrollere kortoppsettene dine.

<div class="container text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 .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="container text-center">
  <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-row-columns:  6;

$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 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-columnsbrukes til å generere breddene (i prosent) av hver enkelt søyle mens $grid-gutter-widthden angir bredden for søylerennene. $grid-row-columnsbrukes til å angi maksimalt antall kolonner av .row-cols-*, blir ethvert tall over denne grensen ignorert.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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 %).