Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

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, seis standert responsive tiers, Sass-fariabelen en mixins, en tsientallen foarôf definieare klassen.

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.

Nij of net bekend mei flexbox? Lês dizze CSS Tricks flexbox-gids foar eftergrûn, terminology, rjochtlinen, en koadefragmenten.
Pylder
Pylder
Pylder
<div class="container">
  <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 folgjend:

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

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Kontenermax-width Gjin (auto) 540px 720px 960px 1140 px 1320 px
Klasse foarheaksel .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# fan kolommen 12
Gootbreedte 1.5rem (.75rem links en rjochts)
Oanpaste goaten Ja
Nestable Ja
Kolombestelling Ja

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.

1 fan 2
2 fan 2
1 fan 3
2 fan 3
3 fan 3
<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>

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.

1 fan 3
2 fan 3 (breder)
3 fan 3
1 fan 3
2 fan 3 (breder)
3 fan 3
<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.

1 fan 3
Ynhâld fan fariabele breedte
3 fan 3
1 fan 3
Ynhâld fan fariabele breedte
3 fan 3
<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 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.

col
col
col
col
kol-8
kol-4
<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>

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

kol-sm-8
kol-sm-4
kol-sm
kol-sm
kol-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 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.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<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>

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.

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

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

Niva 1: .col-sm-3
Niva 2: .col-8 .col-sm-6
Niva 2: .col-4 .col-sm-6
<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

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-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);
  }
}
Main ynhâld
Sekundêre ynhâld
<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-columns: 12 !default;
$grid-gutter-width: 1.5rem !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 %).