Rooster stelsel

Voorbeeld

Bootstrap se roosterstelsel gebruik 'n reeks houers, rye en kolomme om inhoud uit te lê en in lyn te bring. Dit is gebou met flexbox en reageer ten volle. Hieronder is 'n voorbeeld en 'n in-diepte verduideliking van hoe die roosterstelsel bymekaar kom.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Die voorbeeld hierbo skep drie kolomme met gelyke breedte oor alle toestelle en kykpoorte deur ons vooraf gedefinieerde roosterklasse te gebruik. Daardie kolomme is gesentreer in die bladsy met die ouer .container.

Hoe dit werk

Om dit af te breek, hier is hoe die roosterstelsel saamkom:

• Ons rooster ondersteun ses responsiewe breekpunte . Breekpunte is gebaseer op min-widthmedianavrae, wat beteken dat hulle daardie breekpunt en almal daarbo affekteer (bv. is van .col-sm-4toepassing op sm, md, lg, xl, en xxl). Dit beteken dat jy houer- en kolomgrootte en gedrag deur elke breekpunt kan beheer.

• Houers sentreer en vul jou inhoud horisontaal. Gebruik .containervir 'n responsiewe piekselwydte, .container-fluidvir width: 100%oor alle kykpoorte en toestelle, of 'n responsiewe houer (bv. .container-md) vir 'n kombinasie van vloeistof- en piekselwydtes.

• Rye is omhulsels vir kolomme. Elke kolom het horisontale padding(genoem 'n geut) om die spasie tussen hulle te beheer. Dit paddingword dan teengewerk op die rye met negatiewe kantlyne om te verseker dat die inhoud in jou kolomme visueel langs die linkerkant in lyn is. Rye ondersteun ook wysigingsklasse om kolomgrootte en geutklasse eenvormig toe te pas om die spasiëring van jou inhoud te verander.

• Kolomme is ongelooflik buigsaam. Daar is 12 sjabloonkolomme per ry beskikbaar, wat jou toelaat om verskillende kombinasies van elemente te skep wat oor enige aantal kolomme strek. Kolomklasse dui die aantal sjabloonkolomme aan om te span (bv. col-4strek oor vier). widths word in persentasies gestel sodat jy altyd dieselfde relatiewe grootte het.

• Geute is ook responsief en aanpasbaar. Geutklasse is beskikbaar oor alle breekpunte, met almal dieselfde groottes as ons kantlyn en opvullingspasiëring . Verander horisontale geute met .gx-*klasse, vertikale geute met .gy-*, of alle geute met .g-*klasse. .g-0is ook beskikbaar om geute te verwyder.

• Sass veranderlikes, kaarte en mixins dryf die rooster aan. As jy nie die vooraf gedefinieerde roosterklasse in Bootstrap wil gebruik nie, kan jy ons rooster se bron Sass gebruik om jou eie te skep met meer semantiese opmaak. Ons sluit ook 'n paar pasgemaakte CSS-eienskappe in om hierdie Sass-veranderlikes te verbruik vir selfs groter buigsaamheid vir jou.

Wees bewus van die beperkings en foute rondom flexbox , soos die onvermoë om sommige HTML-elemente as flex-houers te gebruik .

Grid opsies

Bootstrap se roosterstelsel kan aanpas oor al ses verstekbreekpunte, en enige breekpunte wat jy pasmaak. Die ses verstek roostervlakke is soos volg:

• Ekstra klein (xs)
• Klein (sm)
• Medium (md)
• Groot (lg)
• Ekstra groot (xl)
• Ekstra ekstra groot (xxl)

Soos hierbo genoem, het elkeen van hierdie breekpunte hul eie houer, unieke klasvoorvoegsel en wysigers. Hier is hoe die rooster oor hierdie breekpunte verander:

Outo-uitlegkolomme

Gebruik breekpunt-spesifieke kolomklasse vir maklike kolomgrootte sonder 'n eksplisiete genommerde klas soos .col-sm-6.

Gelyke breedte

Hier is byvoorbeeld twee roosteruitlegte wat op elke toestel en kykpoort van toepassing is, van xstot xxl. Voeg enige aantal eenheidlose klasse by vir elke breekpunt wat jy nodig het en elke kolom sal dieselfde breedte hê.

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

Stel een kolombreedte in

Outo-uitleg vir flexbox-roosterkolomme beteken ook dat jy die breedte van een kolom kan stel en die broers en susterskolomme outomaties rondom dit kan verander. Jy kan vooraf gedefinieerde roosterklasse (soos hieronder getoon), roostermengsels of inlynwydtes gebruik. Let daarop dat die ander kolomme se grootte sal verander, ongeag die breedte van die middelkolom.

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

Veranderlike breedte inhoud

Gebruik col-{breakpoint}-autoklasse om kolomme te grootte gebaseer op die natuurlike breedte van hul inhoud.

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

Responsiewe klasse

Bootstrap se rooster bevat ses vlakke van voorafbepaalde klasse vir die bou van komplekse responsiewe uitlegte. Pasmaak die grootte van jou kolomme op ekstra klein, klein, medium, groot of ekstra groot toestelle soos jy goeddink.

Alle breekpunte

Vir roosters wat dieselfde is van die kleinste toestelle tot die grootste, gebruik die .colen .col-*klasse. Spesifiseer 'n genommerde klas wanneer jy 'n besondere grootte kolom benodig; anders, hou gerus by .col.

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

Gestapel tot horisontaal

Deur 'n enkele stel .col-sm-*klasse te gebruik, kan jy 'n basiese roosterstelsel skep wat gestapel begin en horisontaal word by die klein breekpunt ( sm).

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

Meng en pas

Wil jy nie hê dat jou kolomme eenvoudig in sommige roostervlakke gestapel moet word nie? Gebruik 'n kombinasie van verskillende klasse vir elke vlak soos nodig. Sien die voorbeeld hieronder vir 'n beter idee van hoe dit alles werk.

<div class="container text-center">
  <!-- 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>

Ry kolomme

Gebruik die responsiewe .row-cols-*klasse om vinnig die aantal kolomme te stel wat jou inhoud en uitleg die beste weergee. Terwyl normale .col-*klasse van toepassing is op die individuele kolomme (bv. .col-md-4), word die rykolommeklasse op die ouer .rowas 'n kortpad gestel. Met .row-cols-autojy kan die kolomme hul natuurlike breedte gee.

Gebruik hierdie rykolomklasse om vinnig basiese roosteruitlegte te skep of om jou kaartuitlegte te beheer.

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

Jy kan ook die bygaande Sass mixin gebruik, 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);
  }
}

Nestel

Om jou inhoud met die verstekrooster te nes, voeg 'n nuwe .rowen stel .col-sm-*kolomme binne 'n bestaande .col-sm-*kolom by. Geneste rye moet 'n stel kolomme insluit wat tot 12 of minder optel (dit word nie vereis dat jy al 12 beskikbare kolomme gebruik nie).

<div class="container text-center">
  <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 Bootstrap se bron-Sass-lêers gebruik, het u die opsie om Sass-veranderlikes en -mengings te gebruik om pasgemaakte, semantiese en responsiewe bladsyuitlegte te skep. Ons voorafbepaalde roosterklasse gebruik dieselfde veranderlikes en mengsels om 'n hele reeks gereed-vir-gebruik-klasse te verskaf vir vinnige responsiewe uitlegte.

Veranderlikes

Veranderlikes en kaarte bepaal die aantal kolomme, die geutwydte en die medianavraagpunt waar swewende kolomme begin word. Ons gebruik dit om die voorafbepaalde roosterklasse wat hierbo gedokumenteer is te genereer, sowel as vir die pasgemaakte mengsels hieronder gelys.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

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

Mengsels

Mixins word saam met die roosterveranderlikes gebruik om semantiese CSS vir individuele roosterkolomme te genereer.

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

Voorbeeld gebruik

Jy kan die veranderlikes verander na jou eie persoonlike waardes, of gebruik net die mixins met hul verstekwaardes. Hier is 'n voorbeeld van die gebruik van die verstek instellings om 'n twee-kolom uitleg te skep met 'n gaping tussen.

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

Pasmaak van die rooster

Deur ons ingeboude rooster Sass veranderlikes en kaarte te gebruik, is dit moontlik om die vooraf gedefinieerde roosterklasse heeltemal aan te pas. Verander die aantal vlakke, die medianavraag-dimensies en die houerwydtes—stel dan weer saam.

Kolomme en geute

Die aantal roosterkolomme kan via Sass-veranderlikes gewysig word. $grid-columnsword gebruik om die wydtes (in persent) van elke individuele kolom te genereer terwyl $grid-gutter-widthdie breedte vir die kolomgeute bepaal word. $grid-row-columnsword gebruik om die maksimum aantal kolomme van te stel .row-cols-*, word enige getal oor hierdie limiet geïgnoreer.

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

Roostervlakke

As u verder as die kolomme self beweeg, kan u ook die aantal roostervlakke aanpas. As jy net vier roostervlakke wil hê, sal jy die $grid-breakpointsen opdateer $container-max-widthsna iets soos hierdie:

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

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

Wanneer jy enige veranderinge aan die Sass veranderlikes of kaarte maak, sal jy jou veranderinge moet stoor en hersaamstel. Deur dit te doen, sal 'n splinternuwe stel voorafbepaalde roosterklasse vir kolomwydtes, afwykings en ordening uitstuur. Hulpmiddels vir responsiewe sigbaarheid sal ook opgedateer word om die pasgemaakte breekpunte te gebruik. Maak seker dat jy roosterwaardes in px(nie rem, em, of %) stel nie.