Source

Gitter System

Benotzt eist mächtegt mobil-éischt Flexbox-Raster fir Layouten vun alle Formen a Gréissten ze bauen dank engem zwielef Kolonnsystem, fënnef Standardreaktiounsniveauen, Sass Variablen a Mixins, an Dosende vu virdefinéierte Klassen.

Wéi et funktionnéiert

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 en detailléierte Bléck op wéi d'Gitter zesumme kënnt.

Nei oder net vertraut mat Flexbox? Liest dësen CSS Tricks Flexbox Guide fir Hannergrond, Terminologie, Richtlinnen a Code Snippets.

Eng vun dräi Kolonnen

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

Dat uewe genannte Beispill erstellt dräi gläich-Breet Sailen op kleng, mëttel, grouss an extra grouss Apparater mat eise virdefinéierte Gitterklassen. Dës Kolonnen sinn op der Säit mat dem Elterendeel zentréiert .container.

Ofbriechen et, hei ass wéi et funktionnéiert:

Container bidden e Mëttel fir den Inhalt vun Ärem Site ze zentréieren an horizontal ze paddelen. Benotzt .containerfir eng reaktiounsfäeger Pixel Breet oder .container-fluidfir width: 100%iwwer all Viewport an Apparat Gréissten.
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 d'Reihen mat negativen Margen entgéintgesat. Op dës Manéier ass all Inhalt an Äre Kolonnen visuell op der lénker Säit ausgeriicht.
An engem Gitter Layout muss Inhalt a Spalten plazéiert ginn an nëmme Kolonnen kënnen direkt Kanner vu Reihen sinn.
Dank Flexbox, Gitterkolonnen ouni spezifizéierter widthLayout automatesch als gläiche Breet Sailen. Zum Beispill, véier Instanzen vun .col-smwäert all automatesch 25% breet aus dem klenge breakpoint an erop. Kuckt d' Auto-Layout Kolonnen Sektioun fir méi Beispiller.
Kolonn Klassen uginn d'Zuel vun de Kolonnen Dir gären aus der méiglech ze benotzen 12 pro Zeil. Also, wann Dir dräi gläich-Breet Sailen iwwer wëllt, kënnt Dir benotzen .col-4.
Kolonn widths sinn a Prozentsaz gesat, sou datt se ëmmer flësseg a grouss sinn relativ zu hirem Elterendeel.
Kolonnen hunn horizontal paddingd'Rennen tëscht eenzelne Sailen ze schafen, Ee, Dir kënnt de marginvun Zeile ewechzehuelen an paddingaus Saile mat .no-guttersop der .row.
Fir de Gitter reaktiounsfäeger ze maachen, ginn et fënnef Gitterbriechpunkten, ee fir all reaktiounsfäeg Breakpunkt : all Breakpunkten (extra kleng), kleng, mëttel, grouss an extra grouss.
Gitterbriechpunkte baséieren op Mindestbreet Medienufroen, dat heescht datt se op deen eenzege Breakpunkt an all déi uewendriwwer gëllen (zB .col-sm-4gëlt fir kleng, mëttel, grouss an extra grouss Apparater, awer net den éischte xsBreakpunkt).
Dir kënnt virdefinéiert Gitterklassen benotzen (wéi .col-4) oder Sass Mixins fir méi semantesch Markup.

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

Während Bootstrap ems oder rems benotzt fir déi meescht Gréissten ze definéieren, pxgi s fir Gitterbriechpunkten a Containerbreet benotzt. Dëst ass well d'Viewport Breet a Pixel ass an net mat der Schrëftgréisst ännert .

Kuckt wéi Aspekter vum Bootstrap Gittersystem iwwer verschidde Geräter mat engem prakteschen Dësch funktionnéieren.

	Extra kleng <576px	Kleng ≥576px	Mëttelméisseg ≥768px	Grouss ≥992px	Extra grouss ≥1200px
Max Container Breet	Keen (auto)	540px	720px	9 60px	1140px
Klass Präfix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# vu Kolonnen	12
Gutter Breet	30px (15px op all Säit vun enger Kolonn)
Nestable	Jo
Kolonn Uerdnung	Jo

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 xl. Füügt all Unzuel vun Eenheetsmanner Klassen fir all Breakpoint, deen Dir braucht, an all Kolonn wäert déiselwecht Breet sinn.

1 vun2

2 vun2

1 vun3

2 vun3

3 vun3

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

Gläich Breet Saile kënnen a verschidde Linnen opgedeelt ginn, awer et war e Safari Flexbox Käfer , deen dëst verhënnert huet ouni explizit flex-basisoder border. Et gi Léisunge fir eeler Browser Versiounen, awer si sollten net néideg sinn wann Dir aktuell sidd.

Kolonn

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

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.

1 vun3

2 vun 3 (méi breet)

3 vun3

1 vun3

2 vun 3 (méi breet)

3 vun3

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

1 vun3

Variabel Breet Inhalt

3 vun3

1 vun3

Variabel Breet Inhalt

3 vun3

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

Gläich Breet Multi-Zeil

Erstellt gläich-Breet Spalten déi méi Reihen spanen andeems Dir e setzt .w-100wou Dir wëllt datt d'Säulen op eng nei Linn briechen. Maacht d'Pausen reaktiounsfäeger andeems Dir se .w-100mat e puer reaktiounsfäeger Display-Utilities vermëscht .

col

<div class="container">
  <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>
</div>

Reaktiounsfäeger Klassen

Bootstrap's Gitter enthält fënnef Stäck 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.

col

col-8

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

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

col-sm-8

col-sm-4

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

.col-12 .col-md-8

.col-6 .col-md-4

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

Gutters

Gutters kënnen reaktiounsfäeger ugepasst ginn duerch breakpoint-spezifesch Padding an negativ Margin Utility Klassen. Fir d'Rennen an enger bestëmmter Zeil z'änneren, paréiert en negativ Margin Utility op der .rowa passende Padding Utilities op der .cols. Den .containeroder .container-fluidElterendeel muss vläicht och ugepasst ginn fir ongewollten Iwwerschwemmung ze vermeiden, andeems en erëm passende Padding-Utility benotzt.

Hei ass e Beispill fir d'Bootstrap Gitter an der grousser ( lg) Breakpoint an uewen ze personaliséieren. Mir hunn d' .colPadding erhéicht mat .px-lg-5, entgéintgesat datt mat .mx-lg-n5op den Elterendeel an dann de Wrapper mat .rowugepasst ..container.px-lg-5

Benotzerdefinéiert Kolonn padding

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Ausriichtung

Benotzt Flexbox Ausrichtung Utilities fir vertikal an horizontal Spalten ze alignéieren.

Vertikal Ausrichtung

Eng vun dräi Kolonnen

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

Eng vun dräi Kolonnen

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

Horizontal Ausrichtung

Eng vun zwou Kolonnen

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

Keng Rennen

D'Rennen tëscht de Sailen an eise virdefinéierte Gitterklassen kënne mat ewechgeholl ginn .no-gutters. Dëst läscht déi negativ margins aus .rowan der horizontal paddingaus all direkt Kanner Kolonnen.

Hei ass de Quellcode fir dës Stiler ze kreéieren. Bedenkt datt d'Kolonniwwerschreiden nëmmen op déi éischt Kannerkolonnen scoped sinn an iwwer Attributselektor gezielt sinn . Och wann dëst e méi spezifesche Selektor generéiert, kann d'Spaltpolsterung nach ëmmer weider personaliséiert ginn mat Abstands-Utilities .

Braucht Dir e Rand-zu-Rand Design? Drop den Elterendeel .containeroder .container-fluid.

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

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

An der Praxis, hei ass wéi et ausgesäit. Notéiert Dir kënnt weider dëst mat all anere virdefinéierte Gitterklassen benotzen (inklusiv Kolonnbreeten, reaktiounsfäeger Niveauen, Neibestellungen a méi).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

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

Kolonne Wrap

Wa méi wéi 12 Kolonnen an enger eenzeger Zeil plazéiert sinn, wäert all Grupp vun extra Kolonnen als eng Eenheet op eng nei Linn wéckelen.

.col-9

.col-4
Zënter 9 + 4 = 13> 12, gëtt dës 4-Kolonn-breet Div op eng nei Linn als eng kontinuéierlech Eenheet gewéckelt.

.col-6 Pafolgende
Saile weider laanscht déi nei Linn.

<div class="container">
  <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>
</div>

Kolonn brécht

Spalten op eng nei Zeil an Flexbox briechen erfuerdert e klengen Hack: füügt en Element mat width: 100%wou Dir Är Kolonnen op eng nei Linn wéckele wëllt. Normalerweis gëtt dëst mat multiple .rows erreecht, awer net all Implementéierungsmethod kann dëst berechnen.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

Dir kënnt dës Paus och bei spezifesche Breakpunkte mat eise reaktiounsfäeger Display-Utilities uwenden .

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

Neibestellung

Klassen bestellen

Benotzt .order-Klassen fir d' visuell Uerdnung vun Ärem Inhalt ze kontrolléieren. Dës Klassen si reaktiounsfäeger, sou kënnt Dir den orderduerch Breakpoint astellen (zB. .order-1.order-md-2). Ëmfaasst Ënnerstëtzung fir 1duerch 12iwwer all fënnef Gitterniveauen.

Éischten, awer net bestallt

Zweetens, awer lescht

Drëttens, awer éischt

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

Et ginn och reaktiounsfäeger .order-firsta .order-lastKlassen déi ordervun engem Element änneren duerch Applikatioun order: -1an order: 13( order: $columns + 1), respektiv. Dës Klassen kënnen och mat den nummeréierte .order-*Klassen gemëscht ginn wéi néideg.

Éischt, awer lescht

Zweetens, awer net bestallt

Drëttens, awer éischt

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

Dir kënnt Gitterkolonnen op zwou Weeër kompenséieren: eis reaktiounsfäeg .offset-Gitterklassen an eis Margin Utilities . Gitterklassen si Gréisst fir Spalten ze passen, während Marge méi nëtzlech si fir séier Layouten wou d'Breet vum Offset variabel ass.

Offset Klassen

Beweegt Spalten no riets mat .offset-md-*Klassen. Dës Klassen erhéijen de lénksen Rand vun enger Kolonn duerch *Kolonnen. Zum Beispill, .offset-md-4bewegt .col-md-4iwwer véier Sailen.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</div>

Zousätzlech zu der Kolonnklärung bei reaktiounsfäeger Breakpunkten, musst Dir eventuell Offsets zrécksetzen. Kuckt dëst an Aktioun am Gitter Beispill .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</div>

Margin Utilities

Mat der Beweegung op Flexbox am v4, kënnt Dir Margin Utilities benotze wéi .mr-autoGeschwësterkolonnen vuneneen fortzwéngen.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

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

Niveau 1: .col-sm-9

Niveau 2: .col-8 .col-sm-6

Niveau 2: .col-4 .col-sm-6

<div class="container">
  <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>
</div>

Sass mixins

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

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

Haaptinhalt

Secondaire Inhalt

<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: 30px !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. Responsabel 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.