Grid-systeem

Gebruik ons krachtige mobile-first flexbox-raster om lay-outs in alle soorten en maten te bouwen dankzij een systeem met twaalf kolommen, vijf standaard responsieve lagen, Sass-variabelen en mixins, en tientallen vooraf gedefinieerde klassen.

Hoe het werkt

Het rastersysteem van Bootstrap gebruikt een reeks containers, rijen en kolommen om inhoud op te delen en uit te lijnen. Het is gebouwd met flexbox en is volledig responsief. Hieronder ziet u een voorbeeld en een diepgaande blik op hoe het raster tot stand komt.

Nieuw of onbekend met flexbox? Lees deze CSS Tricks flexbox-handleiding voor achtergrond, terminologie, richtlijnen en codefragmenten.

Een van de drie kolommen

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

In het bovenstaande voorbeeld worden drie kolommen van gelijke breedte gemaakt op kleine, middelgrote, grote en extra grote apparaten met behulp van onze vooraf gedefinieerde rasterklassen. Die kolommen zijn gecentreerd op de pagina met het bovenliggende .container.

Het opsplitsen, hier is hoe het werkt:

Met containers kunt u de inhoud van uw site centreren en horizontaal opvullen. Gebruik .containervoor een responsieve pixelbreedte of .container-fluidvoor width: 100%alle viewport- en apparaatformaten.
Rijen zijn wrappers voor kolommen. Elke kolom heeft een horizontale padding(goot genoemd) om de ruimte ertussen te regelen. Dit paddingwordt dan tegengegaan op de rijen met negatieve marges. Op deze manier wordt alle inhoud in uw kolommen visueel uitgelijnd aan de linkerkant.
In een rasterlay-out moet inhoud binnen kolommen worden geplaatst en mogen alleen kolommen directe onderliggende rijen zijn.
Dankzij flexbox worden rasterkolommen zonder een opgegeven widthautomatisch opgemaakt als kolommen met gelijke breedte. Vier instanties van .col-smzullen bijvoorbeeld automatisch 25% breed zijn vanaf het kleine breekpunt en hoger. Zie de sectie kolommen voor automatische opmaak voor meer voorbeelden.
Kolomklassen geven het aantal kolommen aan dat u wilt gebruiken van de mogelijke 12 per rij. Dus als u drie kolommen van gelijke breedte wilt gebruiken, kunt u .col-4.
Kolom widths zijn ingesteld in percentages, dus ze zijn altijd vloeiend en hebben een grootte ten opzichte van hun bovenliggende element.
Kolommen hebben horizontaal paddingom de goten tussen afzonderlijke kolommen te maken, maar u kunt de marginuit rijen en paddinguit kolommen verwijderen met .no-guttersop de .row.
Om het raster responsief te maken, zijn er vijf rasteronderbrekingspunten, één voor elk responsief breekpunt : alle breekpunten (extra klein), klein, medium, groot en extra groot.
Grid-onderbrekingspunten zijn gebaseerd op mediaquery's met een minimale breedte, wat betekent dat ze van toepassing zijn op dat ene breekpunt en al die daarboven (bijvoorbeeld van .col-sm-4toepassing op kleine, middelgrote, grote en extra grote apparaten, maar niet op het eerste xsbreekpunt).
U kunt vooraf gedefinieerde rasterklassen (zoals .col-4) of Sass-mixins gebruiken voor meer semantische opmaak.

Wees je bewust van de beperkingen en bugs rond flexbox , zoals het onvermogen om sommige HTML-elementen als flexcontainers te gebruiken .

Rasteropties

Terwijl Bootstrap ems of rems gebruikt voor het definiëren van de meeste formaten, pxworden s gebruikt voor rasteronderbrekingspunten en containerbreedten. Dit komt omdat de breedte van de viewport in pixels is en niet verandert met de lettergrootte .

Bekijk hoe aspecten van het Bootstrap-rastersysteem werken op meerdere apparaten met een handige tabel.

	Extra klein <576px	Klein ≥576px	Gemiddeld ≥768px	Groot (992px)	Extra groot (1200px)
Maximale containerbreedte	Geen (automatisch)	540px	720px	960px	1140px
Klasse voorvoegsel	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# kolommen	12
breedte van de goot	30px (15px aan elke kant van een kolom)
Nestbaar	Ja
Kolomvolgorde	Ja

Kolommen voor automatische opmaak

Gebruik breekpuntspecifieke kolomklassen voor eenvoudige kolomgrootte zonder een expliciete genummerde klasse zoals .col-sm-6.

gelijke breedte

Hier zijn bijvoorbeeld twee rasterlay-outs die van toepassing zijn op elk apparaat en kijkvenster, van xstot xl. Voeg een willekeurig aantal klassen zonder eenheden toe voor elk breekpunt dat u nodig hebt en elke kolom heeft dezelfde breedte.

1 van de 2

2 van 2

1 van 3

2 van 3

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

Gelijke breedte multi-lijn

Maak kolommen van gelijke breedte die meerdere regels overspannen door een in te voegen op de plaats .w-100waar u wilt dat de kolommen op een nieuwe regel eindigen. Maak de pauzes responsief door te mixen .w-100met enkele responsieve weergavehulpprogramma's .

Er was een Safari flexbox-bug waardoor dit niet werkte zonder een expliciete flex-basisof border. Er zijn oplossingen voor oudere browserversies, maar deze zouden niet nodig moeten zijn als uw doelbrowsers niet onder de buggyversies vallen.

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>

Eén kolombreedte instellen

Automatische lay-out voor flexbox-rasterkolommen betekent ook dat u de breedte van één kolom kunt instellen en dat de kolommen van de zusterkolommen er automatisch omheen kunnen worden vergroot. U kunt vooraf gedefinieerde rasterklassen (zoals hieronder weergegeven), rastermixins of inline-breedten gebruiken. Houd er rekening mee dat de grootte van de andere kolommen zal veranderen, ongeacht de breedte van de middelste kolom.

1 van 3

2 van 3 (breder)

3 van 3

1 van 3

2 van 3 (breder)

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

Variabele breedte inhoud

Gebruik col-{breakpoint}-autoklassen om kolommen te rangschikken op basis van de natuurlijke breedte van hun inhoud.

1 van 3

Variabele breedte inhoud

3 van 3

1 van 3

Variabele breedte inhoud

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

Responsieve lessen

Het raster van Bootstrap bevat vijf niveaus van vooraf gedefinieerde klassen voor het bouwen van complexe responsieve lay-outs. Pas de grootte van uw kolommen aan op extra kleine, kleine, middelgrote, grote of extra grote apparaten, zoals u dat wilt.

Alle breekpunten

Voor rasters die hetzelfde zijn van de kleinste apparaten tot de grootste, gebruikt u de .colen .col-*klassen. Geef een genummerde klasse op wanneer u een kolom met een bijzonder formaat nodig hebt; blijf anders gerust bij .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>

Gestapeld naar horizontaal

Met behulp van een enkele set .col-sm-*klassen kunt u een basisrastersysteem maken dat gestapeld begint en horizontaal wordt bij het kleine breekpunt ( 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 en match

Wilt u niet dat uw kolommen eenvoudig in een aantal rasterlagen worden gestapeld? Gebruik indien nodig een combinatie van verschillende klassen voor elke laag. Zie het onderstaande voorbeeld voor een beter idee van hoe het allemaal werkt.

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

dakgoten

Dakgoten kunnen responsief worden aangepast door breekpuntspecifieke opvulling en hulpprogrammaklassen met negatieve marges. Om de goten in een bepaalde rij te wijzigen, koppelt u een hulpprogramma voor negatieve marge op de .rowen bijpassende opvulhulpprogramma's op de .cols. De .containerof .container-fluidouder moet mogelijk ook worden aangepast om ongewenste overloop te voorkomen, door opnieuw een passend opvulhulpprogramma te gebruiken.

Hier is een voorbeeld van het aanpassen van het Bootstrap-raster op het grote ( lg) breekpunt en daarboven. We hebben de .colopvulling vergroot met .px-lg-5, dat tegengegaan met .mx-lg-n5op de ouder en vervolgens de omslag .rowaangepast met ..container.px-lg-5

Aangepaste kolomvulling

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

Rij kolommen

Gebruik de responsieve .row-cols-*klassen om snel het aantal kolommen in te stellen dat uw inhoud en lay-out het beste weergeeft. Terwijl normale .col-*klassen van toepassing zijn op de afzonderlijke kolommen (bijv. .col-md-4), worden de rijkolommenklassen .rowals snelkoppeling op de ouder ingesteld.

Gebruik deze rijkolommenklassen om snel basisrasterlay-outs te maken of om uw kaartlay-outs te beheren.

Kolom

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

Kolom

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

Kolom

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

Kolom

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

Kolom

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

Je kunt ook de bijbehorende Sass mixin gebruiken, 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);
  }
}

Uitlijning

Gebruik flexbox-uitlijnhulpprogramma's om kolommen verticaal en horizontaal uit te lijnen. Internet Explorer 10-11 ondersteunt geen verticale uitlijning van flexitems wanneer de flexcontainer een heeft min-heightzoals hieronder weergegeven. Zie Flexbugs #3 voor meer details.

Verticale uitlijning

Een van de drie kolommen

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

Een van de drie kolommen

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

Een van de twee kolommen

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

Geen goten

De goten tussen kolommen in onze vooraf gedefinieerde rasterklassen kunnen worden verwijderd met .no-gutters. Dit verwijdert de negatieve margins van .rowen de horizontale paddingvan alle directe onderliggende kolommen.

Hier is de broncode voor het maken van deze stijlen. Houd er rekening mee dat kolomoverschrijvingen alleen betrekking hebben op de eerste onderliggende kolommen en worden getarget via attribuutselector . Hoewel dit een meer specifieke selector genereert, kan kolomopvulling nog verder worden aangepast met spatiëringshulpprogramma's .

Een edge-to-edge ontwerp nodig? Laat de ouder vallen .containerof .container-fluid.

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

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

In de praktijk ziet het er zo uit. Houd er rekening mee dat u dit kunt blijven gebruiken met alle andere vooraf gedefinieerde rasterklassen (inclusief kolombreedten, responsieve lagen, herschikkingen en meer).

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

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Kolomterugloop

Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.

.col-9

.col-4
Aangezien 9 + 4 = 13 > 12, wordt deze 4-koloms brede div als één aaneengesloten eenheid op een nieuwe regel gewikkeld.

.col-6
Volgende kolommen gaan verder langs de nieuwe regel.

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

Kolomeinden

Het afbreken van kolommen naar een nieuwe regel in flexbox vereist een kleine hack: voeg een element toe met width: 100%waar u uw kolommen naar een nieuwe regel wilt wikkelen. Normaal gesproken wordt dit bereikt met meerdere .rows, maar niet elke implementatiemethode kan hier rekening mee houden.

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

U kunt deze onderbreking ook toepassen op specifieke onderbrekingspunten met onze hulpprogramma's voor responsieve weergave .

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

Opnieuw ordenen

Bestel lessen

Gebruik .order-klassen om de visuele volgorde van uw inhoud te regelen. Deze klassen zijn responsief, dus u kunt het orderby-breakpoint instellen (bijv. .order-1.order-md-2). Bevat ondersteuning voor 1alle 12vijf rasterlagen.

Eerste in DOM, geen bestelling toegepast

Tweede in DOM, met een grotere bestelling

Derde in DOM, met een bestelling van 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Er zijn ook responsieve klassen .order-firsten .order-lastklassen die het orderelement van een element wijzigen door respectievelijk order: -1en order: 13( order: $columns + 1) toe te passen. Deze klassen kunnen indien nodig ook worden vermengd met de genummerde .order-*klassen.

Eerst in DOM, als laatste besteld

Tweede in DOM, ongeordend

Derde in DOM, eerst besteld

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Kolommen compenseren

U kunt rasterkolommen op twee manieren verschuiven: onze responsieve .offset-rasterklassen en onze margehulpprogramma's . De grootte van rasterklassen is afgestemd op kolommen, terwijl marges nuttiger zijn voor snelle lay-outs waarbij de breedte van de offset variabel is.

Offset klassen

Verplaats kolommen naar rechts met behulp van .offset-md-*klassen. Deze klassen vergroten de linkermarge van een kolom met *kolommen. .offset-md-4Beweegt bijvoorbeeld .col-md-4over vier kolommen.

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

Naast het wissen van kolommen bij responsieve onderbrekingspunten, moet u mogelijk de offsets opnieuw instellen. Zie dit in actie in het rastervoorbeeld .

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

Marge-hulpprogramma's

Met de overstap naar flexbox in v4, kunt u margehulpprogramma's gebruiken .mr-autoom kolommen van broers en zussen van elkaar af te dwingen.

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

Nesten

Als u uw inhoud wilt nesten met het standaardraster, voegt u een nieuwe .rowen een reeks .col-sm-*kolommen toe binnen een bestaande .col-sm-*kolom. Geneste rijen moeten een set kolommen bevatten die optellen tot 12 of minder (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt).

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

Wanneer u de Sass-bronbestanden van Bootstrap gebruikt, hebt u de mogelijkheid om Sass-variabelen en mixins te gebruiken om aangepaste, semantische en responsieve paginalay-outs te maken. Onze vooraf gedefinieerde rasterklassen gebruiken dezelfde variabelen en mixins om een hele reeks kant-en-klare klassen te bieden voor snel reagerende lay-outs.

Variabelen

Variabelen en kaarten bepalen het aantal kolommen, de gootbreedte en het mediaquerypunt waarop zwevende kolommen moeten beginnen. We gebruiken deze om de vooraf gedefinieerde rasterklassen te genereren die hierboven zijn gedocumenteerd, evenals voor de aangepaste mixins die hieronder worden vermeld.

$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 worden gebruikt in combinatie met de rastervariabelen om semantische CSS voor individuele rasterkolommen te genereren.

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

Voorbeeld gebruik

U kunt de variabelen wijzigen in uw eigen aangepaste waarden of gewoon de mixins gebruiken met hun standaardwaarden. Hier is een voorbeeld van het gebruik van de standaardinstellingen om een lay-out met twee kolommen te maken met een tussenruimte.

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

Belangrijkste inhoud

Secundaire inhoud

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

Het raster aanpassen

Met behulp van onze ingebouwde Sass-variabelen en kaarten voor rasters is het mogelijk om de vooraf gedefinieerde rasterklassen volledig aan te passen. Wijzig het aantal lagen, de afmetingen van de mediaquery's en de containerbreedten en compileer vervolgens opnieuw.

Kolommen en goten

Het aantal rasterkolommen kan worden gewijzigd via Sass-variabelen. $grid-columnswordt gebruikt om de breedte (in procent) van elke afzonderlijke kolom te genereren, terwijl $grid-gutter-widthde breedte voor de kolomgoten wordt ingesteld.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Rasterlagen

Als u verder gaat dan de kolommen zelf, kunt u ook het aantal rasterlagen aanpassen. Als je slechts vier rasterlagen wilt, zou je de $grid-breakpointsen bijwerken $container-max-widthsnaar zoiets als dit:

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

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

Wanneer u wijzigingen aanbrengt in de Sass-variabelen of -kaarten, moet u uw wijzigingen opslaan en opnieuw compileren. Als u dit doet, wordt een geheel nieuwe set vooraf gedefinieerde rasterklassen voor kolombreedten, offsets en volgorde weergegeven. Hulpprogramma's voor responsieve zichtbaarheid worden ook bijgewerkt om de aangepaste onderbrekingspunten te gebruiken. Zorg ervoor dat u rasterwaarden instelt in px(niet rem, em, of %).