Grid systeem

Foarbyld

It rastersysteem fan Bootstrap brûkt in searje konteners, rigen en kolommen om ynhâld yn te setten en út te rjochtsjen. It is boud mei flexbox en is folslein responsyf. Hjirûnder is in foarbyld en in yngeande útlis foar hoe't it rastersysteem byinoar komt.

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

It boppesteande foarbyld makket trije kolommen mei deselde breedte oer alle apparaten en viewports mei ús foarôf definieare rasterklassen. Dy kolommen binne sintraal yn 'e side mei de âlder .container.

Hoe't it wurket

It ôfbrekke, hjir is hoe't it rastersysteem byinoar komt:

• Us raster stipet seis responsive brekpunten . Brekpunten binne basearre op min-widthmediafragen, wat betsjut dat se ynfloed hawwe op dat brekpunt en al dy dêrboppe (bgl. .col-sm-4jildt foar sm, md, lg, xl, en xxl). Dit betsjut dat jo kontener- en kolomgrutte en gedrach kinne kontrolearje troch elk brekpunt.

• Containers sintraal en folje jo ynhâld horizontaal. Brûk .containerfoar in responsive pixel breedte, .container-fluidfoar width: 100%oer alle viewports en apparaten, of in responsive container (bygelyks, .container-md) foar in kombinaasje fan floeibere en pixel widths.

• Rigen binne wrappers foar kolommen. Elke kolom hat horizontaal padding(neamd in gutter) foar it kontrolearjen fan de romte tusken har. Dit paddingwurdt dan tsjinwurke op 'e rigen mei negative marzjes om te soargjen dat de ynhâld yn jo kolommen visueel oan'e linkerkant is ôfstimd. Rien stypje ek modifierklassen om kolomgrutte en rôfklassen unifoarm oan te passen om de ôfstân fan jo ynhâld te feroarjen.

• Kolommen binne ongelooflijk fleksibel. D'r binne 12 sjabloankolommen beskikber per rige, wêrtroch jo ferskate kombinaasjes fan eleminten kinne oanmeitsje dy't elk oantal kolommen oerspant. Column klassen jouwe it oantal sjabloan kolommen te span (bygelyks, col-4oerspant fjouwer). widths wurde ynsteld yn persintaazjes sadat jo altyd hawwe deselde relative sizing.

• Gutters binne ek responsyf en oanpasber. Gutter-klassen binne beskikber oer alle brekpunten, mei allegear deselde grutte as ús marzje en padding-ôfstân . Feroarje horizontale gutters mei .gx-*klassen, fertikale gutters mei .gy-*, of alle gutters mei .g-*klassen. .g-0is ek beskikber om goaten te ferwiderjen.

• Sass fariabelen, kaarten, en mixins macht it roaster. As jo ​​​​de foarôf definieare rasterklassen yn Bootstrap net wolle brûke, kinne jo de boarne Sass fan ús raster brûke om jo eigen te meitsjen mei mear semantyske markup. Wy befetsje ek wat oanpaste CSS-eigenskippen om dizze Sass-fariabelen te konsumearjen foar noch gruttere fleksibiliteit foar jo.

Wês bewust fan de beheiningen en bugs om flexbox hinne , lykas it ûnfermogen om guon HTML-eleminten as flexcontainers te brûken .

Grid opsjes

It rastersysteem fan Bootstrap kin oanpasse oer alle seis standert brekpunten, en alle brekpunten dy't jo oanpasse. De seis standert grid tiers binne as folget:

• Ekstra lyts (xs)
• Lyts (sm)
• Medium (md)
• grut (lg)
• Ekstra grut (xl)
• Ekstra ekstra grut (xxl)

Lykas hjirboppe opmurken, hat elk fan dizze brekpunten har eigen kontener, unyk klassefoarheaksel en modifiers. Hjir is hoe't it raster feroaret oer dizze brekpunten:

Auto-opmaak kolommen

Brûk breakpoint-spesifike kolomklassen foar maklike kolomgrutte sûnder in eksplisite nûmere klasse lykas .col-sm-6.

Gelikense breedte

Hjir binne bygelyks twa rasteryndielingen dy't jilde foar elk apparaat en viewport, fan xsoant xxl. Foegje elk oantal klassen sûnder ienheid ta foar elk brekpunt dat jo nedich binne en elke kolom sil deselde breedte wêze.

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

It ynstellen fan ien kolom breedte

Auto-yndieling foar flexbox-rasterkolommen betsjut ek dat jo de breedte fan ien kolom kinne ynstelle en de siblingskolommen automatysk feroarje om de grutte. Jo kinne foarôf definieare rasterklassen brûke (lykas hjirûnder werjûn), rastermixins, of ynline breedtes. Tink derom dat de oare kolommen de grutte sille feroarje, nettsjinsteande de breedte fan 'e middenkolom.

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

Ynhâld fan fariabele breedte

Brûk col-{breakpoint}-autoklassen foar grutte kolommen basearre op de natuerlike breedte fan har ynhâld.

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

It raster fan Bootstrap omfettet seis lagen fan foarôf definieare klassen foar it bouwen fan komplekse responsive yndielingen. Pas de grutte fan jo kolommen oan op ekstra lyts, lyts, medium, grut of ekstra grutte apparaten lykas jo goed fine.

Alle brekpunten

Foar rasters dy't itselde binne fan 'e lytste apparaten oant de grutste, brûk de .colen .col-*klassen. Spesifisearje in nûmere klasse as jo nedich hawwe in bysûnder grutte kolom; oars, fiel frij om fêsthâlde oan .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>

Steapele nei horizontaal

Mei help fan in inkele set fan .col-sm-*klassen, kinne jo meitsje in basis raster systeem dat begjint út steapele en wurdt horizontaal op de lytse breakpoint ( 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 en match

Wolle jo net dat jo kolommen gewoan steapele wurde yn guon rastertiers? Brûk in kombinaasje fan ferskate klassen foar elke tier as nedich. Sjoch it foarbyld hjirûnder foar in better idee fan hoe't it allegear wurket.

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

Rige kolommen

Brûk de responsive .row-cols-*klassen om fluch it oantal kolommen yn te stellen dat jo ynhâld en yndieling it bêste werjaan. Wylst normale .col-*klassen jilde foar de yndividuele kolommen (bygelyks, .col-md-4), wurde de rige kolommen klassen ynsteld op 'e âlder .rowas in fluchtoets. Mei .row-cols-autokinne jo de kolommen har natuerlike breedte jaan.

Brûk dizze klassen foar rige kolommen om fluch basisrasteropmaak te meitsjen of jo kaartopmaak te kontrolearjen.

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

Jo kinne ek de byhearrende Sass-mixin brûke 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);
  }
}

Nesting

Om jo ynhâld mei it standertraster te nesteljen, foegje in nije .rowen set .col-sm-*kolommen ta binnen in besteande .col-sm-*kolom. Neste rigen moatte in set fan kolommen befetsje dy't 12 of minder optelle (it is net fereaske dat jo alle 12 beskikbere kolommen brûke).

<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

By it brûken fan Bootstrap's boarne Sass-bestannen, hawwe jo de opsje om Sass-fariabelen en mixins te brûken om oanpaste, semantyske en responsive side-layouts te meitsjen. Us foarôf definieare rasterklassen brûke deselde fariabelen en mixins om in heule suite fan klear te brûken klassen te leverjen foar rappe responsive yndielingen.

Fariabelen

Fariabelen en kaarten bepale it oantal kolommen, de gootbreedte en it mediafraachpunt wêrop driuwende kolommen begjinne moatte. Wy brûke dizze om de foarôf definieare rasterklassen te generearjen dy't hjirboppe dokuminteare binne, lykas foar de oanpaste mixins hjirûnder.

$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 wurde brûkt yn kombinaasje mei de rasterfariabelen om semantyske CSS te generearjen foar yndividuele rasterkolommen.

// 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);

Foarbyld fan gebrûk

Jo kinne de fariabelen oanpasse oan jo eigen oanpaste wearden, of gewoan de mixins brûke mei har standertwearden. Hjir is in foarbyld fan it brûken fan de standertynstellingen om in opmaak mei twa kolommen te meitsjen mei in gat tusken.

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

It raster oanpasse

Mei ús ynboude raster Sass fariabelen en kaarten, is it mooglik om de foarôf definieare rasterklassen folslein oan te passen. Feroarje it oantal lagen, de dimensjes fan 'e mediafraach, en de kontenerbreedte - kompilearje dan opnij.

Kolommen en goaten

It oantal rasterkolommen kin wizige wurde fia Sass fariabelen. $grid-columnswurdt brûkt om te generearjen de widths (yn prosint) fan elke yndividuele kolom wylst $grid-gutter-widthstelt de breedte foar de kolom gutters. $grid-row-columnswurdt brûkt om it maksimum oantal kolommen yn te stellen fan .row-cols-*, elk oantal oer dizze limyt wurdt negearre.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Grid tiers

Troch fierder te gean as de kolommen sels, kinne jo ek it oantal rasterlagen oanpasse. As jo ​​​​mar fjouwer rasterlagen woene, soene jo de $grid-breakpointsen bywurkje $container-max-widthsnei soksawat:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

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

By it meitsjen fan wizigingen oan 'e Sass-fariabelen of kaarten, moatte jo jo wizigingen bewarje en opnij kompilearje. Troch dit te dwaan sil in gloednije set foarôf definieare rasterklassen útfiere foar kolombreedten, offsets en oardering. Responsive sichtberens sil ek bywurke wurde om de oanpaste brekpunten te brûken. Soargje derfoar dat jo rasterwearden ynstelle yn px(net rem, em, of %).