Grid systeem

Brûk ús krêftige mobyl-earste flexbox-raster om yndielingen fan alle foarmen en maten te bouwen mei tank oan in tolve kolomsysteem, fiif standert responsive tiers, Sass-fariabelen en mixins, en tsientallen foarôf definieare klassen.

Hoe't it wurket

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 blik op hoe't it raster byinoar komt.

Nij of net bekend mei flexbox? Lês dizze CSS Tricks flexbox-gids foar eftergrûn, terminology, rjochtlinen, en koadefragmenten.

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

It boppesteande foarbyld makket trije kolommen mei deselde breedte op lytse, medium, grutte en ekstra grutte apparaten mei ús foarôf definieare rasterklassen. Dy kolommen binne sintraal yn 'e side mei de âlder .container.

It ôfbrekke, hjir is hoe't it wurket:

• Containers biede in middel om de ynhâld fan jo side te centreren en horizontaal op te foljen. Brûk .containerfoar in responsive pikselbreedte of .container-fluidfoar width: 100%alle viewport- en apparaatgrutte.
• 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 de rigen mei negative marzjes. Op dizze manier wurdt alle ynhâld yn jo kolommen visueel oan 'e linkerkant ôfstimd.
• Yn in rasteryndieling moat ynhâld binnen kolommen pleatst wurde en allinich kolommen kinne direkte bern fan rigen wêze.
• Mei tank oan flexbox sille gridkolommen sûnder in spesifisearre widthautomatysk yndieling as kolommen mei deselde breedte. Bygelyks, fjouwer eksimplaren fan .col-smsil elk automatysk wêze 25% breed fan de lytse breakpoint en omheech. Sjoch de auto-opmaak kolommen seksje foar mear foarbylden.
• Kolomklassen jouwe it oantal kolommen oan dat jo brûke wolle út de mooglike 12 per rigel. Dus, as jo trije kolommen mei deselde breedte wolle, kinne jo gebrûk meitsje fan .col-4.
• Kolom widths wurde ynsteld yn persintaazjes, sadat se altyd floeiber en grutte relatyf oan harren âlder elemint.
• Kolommen hawwe horizontaal paddingte meitsjen de goten tusken yndividuele kolommen, lykwols, kinne jo fuortsmite de marginút rigen en paddingút kolommen mei .no-guttersop 'e .row.
• Om it raster responsyf te meitsjen, binne d'r fiif rasterbrekpunten, ien foar elk responsyf brekpunt : alle brekpunten (ekstra lyts), lyts, medium, grut en ekstra grut.
• Grid breakpoints binne basearre op minimale breedte media queries, wat betsjut dat se jilde foar dat iene breakpoint en al dy boppe it (bgl, .col-sm-4jildt foar lytse, medium, grutte en ekstra grutte apparaten, mar net it earste xsbrekpunt).
• Jo kinne foarôf definieare rasterklassen (lykas .col-4) as Sass-mixins brûke foar mear semantyske markup.

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

Wylst Bootstrap brûkt ems of rems foar it definiearjen fan de measte maten, pxs wurde brûkt foar grid breakpoints en container widths. Dit komt om't de sichtportbreedte yn piksels is en net feroaret mei de lettertypegrutte .

Sjoch hoe't aspekten fan it Bootstrap-rastersysteem wurkje oer meardere apparaten mei in handige tabel.

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

Kolommen mei gelikense breedte kinne wurde ferdield yn meardere rigels, mar d'r wie in Safari-flexbox-bug dy't foarkommen dat dit sûnder in eksplisite flex-basisof border. D'r binne oplossingen foar âldere browserferzjes, mar se soene net nedich wêze moatte as jo aktueel binne.

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

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

Equal-width multi-rige

Meitsje kolommen mei lykweardige breedte dy't meardere rigen oerspanje troch in yn te foegjen .w-100wêr't jo wolle dat de kolommen nei in nije rigel brekke. Meitsje de pauzes responsyf troch de te mingjen .w-100mei guon responsive display-hulpprogramma's .

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

It raster fan Bootstrap omfettet fiif 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="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>

Steapele nei horizontaal

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

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

Alignment

Brûk flexbox-ôfstimmingsprogramma's om kolommen fertikaal en horizontaal út te rjochtsjen.

Fertikale ôfstimming

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

Horizontale ôfstimming

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

Gjin geiten

De goten tusken kolommen yn ús foarôf definieare rasterklassen kinne wurde fuortsmiten mei .no-gutters. Dit smyt de negative margins út .rowen de horizontale paddingút alle direkte bern kolommen.

Hjir is de boarnekoade foar it meitsjen fan dizze stilen. Tink derom dat kolomoverriders allinich binne foar de earste bernkolommen en wurde rjochte fia attribútselektor . Wylst dit in mear spesifike selector genereart, kin kolompadding noch fierder oanpast wurde mei spacing utilities .

In edge-to-edge ûntwerp nedich? Drop de âlder .containerof .container-fluid.

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

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

Yn 'e praktyk, hjir is hoe't it derút sjocht. Tink derom dat jo dit kinne trochgean mei alle oare foarôf definieare rasterklassen (ynklusyf kolombreedten, responsive tiers, opnij oarders, en mear).

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

Column wrapping

As mear as 12 kolommen wurde pleatst binnen ien rige, sil elke groep fan ekstra kolommen, as ien ienheid, wrap op in nije rigel.

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

Kolom brekt

It brekken fan kolommen nei in nije rigel yn flexbox fereasket in lytse hack: foegje in elemint ta mei width: 100%wêr't jo jo kolommen yn in nije rigel wolle wrapje. Normaal wurdt dit dien mei meardere .rows, mar net elke útfiering metoade kin rekken mei dit.

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

Jo kinne dizze brek ek tapasse op spesifike brekpunten mei ús responsive display-hulpprogramma's .

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

Weromoardieling

Klassen bestelle

Brûk .order-klassen foar it kontrolearjen fan de fisuele folchoarder fan jo ynhâld. Dizze klassen binne responsyf, dus jo kinne it ordertroch brekpunt ynstelle (bygelyks .order-1.order-md-2). Omfettet stipe foar 1troch 12alle fiif rasterlagen.

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

D'r binne ek responsive .order-firsten .order-lastklassen dy't de orderfan in elemint feroarje troch respektivelik oan te passen order: -1en order: 13( order: $columns + 1). Dizze klassen kinne ek wurde kombinearre mei de nûmere .order-*klassen as nedich.

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

Offset kolommen

Jo kinne rasterkolommen op twa manieren kompensearje: ús responsive .offset-rasterklassen en ús marzje-nutsbedriuwen . Gridklassen binne grutte om te passen by kolommen, wylst marzjes handiger binne foar rappe opmaak wêr't de breedte fan 'e offset fariabel is.

Offset klassen

Ferpleats kolommen nei rjochts mei help fan .offset-md-*klassen. Dizze klassen fergrutsje de loftermarge fan in kolom troch *kolommen. Bygelyks, .offset-md-4beweecht .col-md-4oer fjouwer kolommen.

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

Neist kolom wiskjen by responsive brekpunten, moatte jo miskien offsets weromsette. Sjoch dit yn aksje yn it rasterfoarbyld .

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

Margin utilities

Mei de ferhuzing nei flexbox yn v4, kinne jo marzje-hulpprogramma's brûke lykas sibbenkolommen fan inoar .mr-autoôf te twingen.

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

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="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 mixins

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

// Get fancy by offsetting, or changing the sort order
@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 {
  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>

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-widthkinne breakpoint-spesifike breedtes dy't wurde ferdield lykmjittich oer padding-leften padding-rightfoar de kolom gutters.

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