Gitter System

Beispill

De Gittersystem vum Bootstrap benotzt eng Serie vu Container, Zeilen a Spalten fir Inhalt ze Layout an ausriichten. Et ass mat Flexbox gebaut an ass voll reaktiounsfäeger. Drënner ass e Beispill an eng detailléiert Erklärung fir wéi de Gittersystem zesumme kënnt.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Dat uewe genannte Beispill erstellt dräi gläich-Breet Kolonnen iwwer all Apparater a Viewports mat eise virdefinéierte Gitterklassen. Dës Kolonnen sinn op der Säit mat dem Elterendeel zentréiert .container.

Wéi et funktionnéiert

Ofbriechen et, hei ass wéi de Gittersystem zesummegeet:

• Eist Gitter ënnerstëtzt sechs reaktiounsfäeg Breakpunkter . Breakpoints baséieren op min-widthMedienufroen, dat heescht datt se dee Breakpoint an all déi uewendriwwer beaflossen (zB .col-sm-4gëlt fir sm, md, lg, xl, an xxl). Dëst bedeit datt Dir Container- a Kolonnengréisst a Verhalen duerch all Breakpunkt kontrolléiere kënnt.

• Container zentréieren an horizontal padden Ären Inhalt. Benotzt .containerfir eng reaktiounsfäeger Pixel Breet, .container-fluidfir width: 100%iwwer all viewports an Apparater, oder engem reaktiounsfäeger Behälter (zB, .container-md) fir eng Kombinatioun vun Flëssegket a Pixel Breet.

• Reihen sinn Wrappers fir Sailen. All Kolonn huet horizontal padding(genannt Rennen) fir de Raum tëscht hinnen ze kontrolléieren. Dëst paddinggëtt dann op de Reihen mat negativen Margen entgéintgesat fir sécherzestellen datt den Inhalt an Äre Kolonnen visuell op der lénker Säit ausgeriicht ass. Reihen ënnerstëtzen och Modifizéierungsklassen fir d'Kolonngréisst an d' Gutt-Klassen eenheetlech z'applizéieren fir d'Distanz vun Ärem Inhalt z'änneren.

• Kolonnen sinn onheemlech flexibel. Et gi 12 Schablounsäulen pro Zeil verfügbar, wat Iech erlaabt verschidde Kombinatioune vun Elementer ze kreéieren déi all Zuel vu Kolonnen spanen. Kolonneklassen weisen d'Zuel vun de Schablounsäulen un fir ze spanen (zB col-4Spann véier). widths sinn an Prozentzuelen gesat sou datt Dir ëmmer déi selwecht relativ Gréisst hutt.

• Gutters sinn och reaktiounsfäeger a personaliséierbar. Gutter Klassen sinn iwwer all Breakpoints verfügbar, mat all deene selwechte Gréisste wéi eis Margin a Padding Abstand . Änneren horizontal gutters mat .gx-*Klassen, vertikal gutters mat .gy-*, oder all gutters mat .g-*Klassen. .g-0ass och verfügbar fir Rennen ze läschen.

• Sass Verännerlechen, Kaarten, a Mixins Muecht d'Gitter. Wann Dir net déi virdefinéiert Gitterklassen am Bootstrap benotze wëllt, kënnt Dir d'Quell Sass vun eisem Gitter benotze fir Ären eegene mat méi semantesche Markup ze kreéieren. Mir enthalen och e puer CSS personaliséiert Eegeschafte fir dës Sass Variablen ze konsuméieren fir nach méi Flexibilitéit fir Iech.

Sidd bewosst vun den Aschränkungen a Bugs ronderëm Flexbox , wéi d' Onméiglechkeet e puer HTML Elementer als Flex Container ze benotzen .

Gitter Optiounen

De Gittersystem vum Bootstrap kann sech iwwer all sechs Standard Breakpoints upassen, an all Breakpoints déi Dir personaliséiert. Déi sechs Default Grid Tiere sinn wéi follegt:

• Extra kleng (xs)
• Kleng (sm)
• Mëttelméisseg (md)
• Grouss (lg)
• Extra grouss (xl)
• Extra grouss (xxl)

Wéi uewen ernimmt, hunn all eenzel vun dësen breakpoints hiren eegene Container, eenzegaarteg Klass Präfix, an modifiers. Hei ass wéi d'Gitter iwwer dës Breakpunkte ännert:

Auto-Layout Kolonnen

Benotzt breakpoint-spezifesch Kolonnklassen fir einfach Kolonngréisst ouni explizit nummeréiert Klass wéi .col-sm-6.

Gläich Breet

Zum Beispill, hei sinn zwee Gitter Layouten déi op all Apparat an Viewport gëllen, vun xsbis xxl. Füügt all Unzuel vun Eenheetsmanner Klassen fir all Breakpoint, deen Dir braucht, an all Kolonn wäert déiselwecht Breet sinn.

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

Astellung vun enger Kolonnbreet

Auto-Layout fir Flexbox Gitter Säulen heescht och datt Dir d'Breet vun enger Kolonn astelle kënnt an d'Geschwëster Kolonnen automatesch ëm d'Gréisst änneren. Dir kënnt virdefinéiert Gitterklassen benotzen (wéi hei ënnendrënner), Gittermixen oder Inline Breeten. Bedenkt datt déi aner Spalten d'Gréisst änneren egal wéi d'Breet vun der Mëttelkolonne.

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

Benotzt col-{breakpoint}-autoKlassen fir Spalten ze gréisseren baséiert op der natierlecher Breet vun hirem Inhalt.

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

Reaktiounsfäeger Klassen

Dem Bootstrap säi Gitter enthält sechs Niveaue vu virdefinéierte Klassen fir komplex reaktiounsfäeg Layouten ze bauen. Personnaliséiert d'Gréisst vun Äre Sailen op extra kleng, kleng, mëttel, grouss oder extra grouss Apparater wéi Dir et passt.

All Breakpoints

Fir Gitter déi d'selwecht sinn aus dem klengste vun Apparater bis zum gréissten, benotzt d' .cola .col-*Klassen. Gitt eng nummeréiert Klass un wann Dir eng speziell grouss Kolonn braucht; soss, fillen gratis ze halen .col.

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

Op horizontal gestapelt

Mat engem eenzege Set vu .col-sm-*Klassen kënnt Dir e Basisrastersystem erstellen deen gestapelt ufänkt a gëtt horizontal um klenge Breakpunkt ( 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 a Match

Wëllt Dir net datt Är Spalten einfach an e puer Gitterstufen stackelen? Benotzt eng Kombinatioun vu verschiddene Klassen fir all Tier wéi néideg. Kuckt d'Beispill hei ënnen fir eng besser Iddi wéi et alles funktionnéiert.

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

Rei Kolonnen

Benotzt déi reaktiounsfäeger .row-cols-*Klassen fir séier d'Zuel vun de Spalten ze setzen déi Ären Inhalt an de Layout am Beschten maachen. Wärend normal .col-*Klassen op déi eenzel Kolonnen gëllen (zB, .col-md-4), sinn d'Zeilkolonnen Klassen op den Elterendeel .rowals Ofkiirzung gesat. Mat .row-cols-autoDir kënnt de Sailen hir natierlech Breet ginn.

Benotzt dës Zeilkolonnen Klassen fir séier Basis Gitter Layouten ze kreéieren oder Är Kaarte Layouten ze kontrolléieren.

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

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

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

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

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

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

Dir kënnt och de Begleet Sass Mixin benotzen, 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

Fir Ären Inhalt mat dem Standardgitter ze nestéieren, füügt eng nei .rowa Set vu .col-sm-*Spalten an enger existéierender .col-sm-*Kolonn. Nested Zeile sollen eng Rei vu Kolonnen enthalen déi bis zu 12 oder manner addéieren (et ass net erfuerderlech datt Dir all 12 verfügbare Kolonnen benotzt).

<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

Wann Dir Bootstrap Quell Sass Dateien benotzt, hutt Dir d'Méiglechkeet Sass Variablen a Mixins ze benotzen fir personaliséiert, semantesch a reaktiounsfäeg Säit Layouten ze kreéieren. Eis virdefinéiert Gitterklassen benotzen déiselwecht Variabelen a Mixins fir eng ganz Suite vu prett-ze-benotzen Klassen fir séier reaktiounsfäeg Layouten ze bidden.

Variablen

Variablen a Kaarten bestëmmen d'Zuel vun de Sailen, d'Grennebreet, an de Medienufropunkt, op deem schwiewende Spalten ufänken. Mir benotzen dës fir déi virdefinéiert Gitterklassen ze generéieren déi hei uewen dokumentéiert sinn, souwéi fir déi personaliséiert Mixins hei ënnendrënner.

$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 ginn a Verbindung mat de Gittervariablen benotzt fir semantesch CSS fir eenzel Gitterkolonnen ze generéieren.

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

Beispill Benotzung

Dir kënnt d'Variabelen op Är eege personaliséiert Wäerter änneren, oder just d'Mixins mat hiren Standardwäerter benotzen. Hei ass e Beispill fir d'Standardastellungen ze benotzen fir en zwee-Kolonn Layout mat engem Spalt tëscht.

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

Personaliséierung vum Gitter

Mat eisem agebaute Raster Sass Variablen a Kaarten, ass et méiglech déi virdefinéiert Gitterklassen komplett ze personaliséieren. Ännert d'Zuel vun den Niveauen, d'Medien Ufro Dimensiounen, an d'Container Breet - dann nei kompiléieren.

Sailen a Rennen

D'Zuel vun de Gitterkolonnen kann iwwer Sass Variablen geännert ginn. $grid-columnsgëtt benotzt fir d'Breeten (a Prozent) vun all eenzel Kolonn ze generéieren, während $grid-gutter-widthd'Breet fir d'Kolonnrennen setzt.

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

Gitter Stäck

Beweegt iwwer d'Kolonn selwer, kënnt Dir och d'Zuel vun de Gitterstufen personaliséieren. Wann Dir just véier Gittertiere wëllt, da géift Dir den $grid-breakpointsan $container-max-widthsop sou eppes aktualiséieren:

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

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

Wann Dir Ännerungen un de Sass Variablen oder Kaarten maacht, musst Dir Är Ännerungen späicheren an nei kompiléieren. Maachen dëst wäert e fuschneie Set vu virdefinéierte Gitterklassen fir Kolonnbreeten, Offsets a Bestellung erausginn. Reaktiounsfäeg Visibilitéit Utilities ginn och aktualiséiert fir déi personaliséiert Breakpoints ze benotzen. Gitt sécher datt Dir Gitterwäerter an px(net rem, em, oder %) setzt.