Grid-systeem

Voorbeeld

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 uitgebreide uitleg over hoe het rastersysteem in elkaar zit.

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

In het bovenstaande voorbeeld worden drie kolommen van gelijke breedte gemaakt voor alle apparaten en viewports met behulp van onze vooraf gedefinieerde rasterklassen. Die kolommen zijn gecentreerd op de pagina met het bovenliggende .container.

Hoe het werkt

Door het op te splitsen, hier is hoe het rastersysteem samenkomt:

• Ons raster ondersteunt zes responsieve breekpunten . Breekpunten zijn gebaseerd op min-widthmediaquery's, wat betekent dat ze van invloed zijn op dat breekpunt en al die erboven (bijvoorbeeld van .col-sm-4toepassing op sm, md, lg, xl, en xxl). Dit betekent dat u de grootte en het gedrag van containers en kolommen voor elk onderbrekingspunt kunt bepalen.

• Containers centreren en horizontaal opvullen van uw inhoud. Gebruik .containervoor een responsieve pixelbreedte, .container-fluidvoor width: 100%alle viewports en apparaten, of een responsieve container (bijv. .container-md) voor een combinatie van vloeiende en pixelbreedten.

• Rijen zijn wrappers voor kolommen. Elke kolom heeft een horizontale padding(goot genoemd) om de ruimte ertussen te regelen. Dit paddingwordt vervolgens tegengegaan op de rijen met negatieve marges om ervoor te zorgen dat de inhoud in uw kolommen visueel aan de linkerkant wordt uitgelijnd. Rijen ondersteunen ook modificatieklassen om kolomgrootte en gootklassen uniform toe te passen om de spatiëring van uw inhoud te wijzigen.

• Kolommen zijn ongelooflijk flexibel. Er zijn 12 sjabloonkolommen beschikbaar per rij, zodat u verschillende combinaties van elementen kunt maken die een willekeurig aantal kolommen beslaan. Kolomklassen geven het aantal sjabloonkolommen aan dat moet worden overspannen (bijvoorbeeld col-4overspant vier). widths zijn ingesteld in percentages, zodat u altijd dezelfde relatieve maatvoering heeft.

• Dakgoten zijn ook responsief en aanpasbaar. Gutterklassen zijn beschikbaar voor alle breekpunten, met allemaal dezelfde afmetingen als onze marge en opvulafstand . Verander horizontale goten met .gx-*klassen, verticale goten met .gy-*, of alle goten met .g-*klassen. .g-0is ook beschikbaar voor het verwijderen van goten.

• Sass-variabelen, kaarten en mixins voeden het elektriciteitsnet. Als u de vooraf gedefinieerde rasterklassen in Bootstrap niet wilt gebruiken, kunt u de Sass-bron van ons raster gebruiken om uw eigen rasterklassen te maken met meer semantische opmaak. We nemen ook enkele aangepaste CSS-eigenschappen op om deze Sass-variabelen te gebruiken voor nog meer flexibiliteit voor u.

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

Rasteropties

Het rastersysteem van Bootstrap kan worden aangepast aan alle zes standaard breekpunten en alle breekpunten die u aanpast. De zes standaard rasterlagen zijn als volgt:

• Extra klein (xs)
• Klein (sm)
• Gemiddeld (md)
• Groot (lg)
• Extra groot (xl)
• Extra extra groot (xxl)

Zoals hierboven vermeld, heeft elk van deze breekpunten hun eigen container, uniek klassevoorvoegsel en modifiers. Zo verandert het raster op deze breekpunten:

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 xxl. Voeg een willekeurig aantal eenheidsloze klassen toe voor elk breekpunt dat u nodig hebt en elke kolom zal dezelfde breedte hebben.

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

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. Merk op dat de grootte van de andere kolommen zal veranderen, ongeacht de breedte van de middelste kolom.

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

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

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

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

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

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 rijkolomklassen .rowstandaard ingesteld op de bovenliggende kolom voor ingesloten kolommen. Met .row-cols-autokunt u de kolommen hun natuurlijke breedte geven.

Gebruik deze rijkolommenklassen om snel basisrasterlay-outs te maken of om uw kaartlay-outs te beheren en indien nodig op kolomniveau te overschrijven.

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

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

<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

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: 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 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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);
  }
}

<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: 1.5rem !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 %).