Rooster stelsel

Gebruik ons kragtige mobiele-eerste flexbox-rooster om uitlegte van alle vorms en groottes te bou danksy 'n twaalf kolomstelsel, vyf verstek-responsiewe vlakke, Sass-veranderlikes en -mengsels, en dosyne voorafbepaalde klasse.

Hoe dit werk

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 blik op hoe die rooster bymekaar kom.

Nuut by of onbekend met Flexbox? Lees hierdie CSS Tricks flexbox-gids vir agtergrond, terminologie, riglyne en kodebrokkies.

Een van drie kolomme

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

Die voorbeeld hierbo skep drie kolomme met gelyke breedte op klein, medium, groot en ekstra groot toestelle deur ons voorafbepaalde roosterklasse te gebruik. Daardie kolomme is gesentreer in die bladsy met die ouer .container.

Om dit af te breek, hier is hoe dit werk:

Houers bied 'n manier om jou werf se inhoud te sentreer en horisontaal te vul. Gebruik .containervir 'n responsiewe piekselwydte of .container-fluidvir width: 100%alle kykpoort- en toestelgroottes.
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 marges. Op hierdie manier is al die inhoud in u kolomme visueel aan die linkerkant in lyn.
In 'n roosteruitleg moet inhoud binne kolomme geplaas word en slegs kolomme mag onmiddellike kinders van rye wees.
Danksy flexbox sal roosterkolomme sonder 'n gespesifiseerde widthoutomaties as gelyke breedte kolomme uitleg. Byvoorbeeld, vier gevalle van .col-smsal elk outomaties 25% breed wees vanaf die klein breekpunt en hoër. Sien die outo-uitlegkolomme- afdeling vir meer voorbeelde.
Kolomklasse dui die aantal kolomme aan wat jy uit die moontlike 12 per ry wil gebruik. Dus, as jy drie kolomme met dieselfde breedte wil hê, kan jy .col-4.
Kolom widths word in persentasies gestel, so hulle is altyd vloeibaar en groot relatief tot hul moederelement.
Kolomme het horisontale paddingom die geute tussen individuele kolomme te skep, maar jy kan die marginvan rye en paddingvan kolomme met .no-guttersop die verwyder .row.
Om die rooster responsief te maak, is daar vyf roosterbreekpunte, een vir elke responsiewe breekpunt : alle breekpunte (ekstra klein), klein, medium, groot en ekstra groot.
Roosterbreekpunte is gebaseer op medianavrae met 'n minimum breedte, wat beteken dat hulle van toepassing is op daardie een breekpunt en almal daarbo (bv. van .col-sm-4toepassing op klein, medium, groot en ekstra groot toestelle, maar nie die eerste xsbreekpunt nie).
Jy kan vooraf gedefinieerde roosterklasse (soos .col-4) of Sass-mengings gebruik vir meer semantiese opmaak.

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

Grid opsies

Terwyl Bootstrap ems of rems gebruik om die meeste groottes te definieer, pxword s gebruik vir roosterbreekpunte en houerwydtes. Dit is omdat die kykpoortwydte in pixels is en nie verander met die lettergrootte nie .

Kyk hoe aspekte van die Bootstrap-roosterstelsel oor verskeie toestelle werk met 'n handige tabel.

	Ekstra klein <576px	Klein ≥576 px	Medium ≥768 px	Groot ≥992px	Ekstra groot ≥1200px
Maksimum houer breedte	Geen (outo)	540 px	720 px	960 px	1140 px
Klas voorvoegsel	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# van kolomme	12
Geut breedte	30px (15px aan elke kant van 'n kolom)
Nesbaar	Ja
Kolombestelling	Ja

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 xl. Voeg enige aantal eenheidlose klasse by vir elke breekpunt wat jy nodig het en elke kolom sal dieselfde breedte hê.

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

Meerlyn met gelyke breedte

Skep gelyke breedte kolomme wat oor verskeie lyne strek deur 'n in te voeg .w-100waar jy wil hê die kolomme moet breek na 'n nuwe lyn. Maak die pouses reageer deur te meng .w-100met 'n paar responsiewe vertoonhulpprogramme .

Daar was 'n Safari flexbox fout wat verhoed het dat dit werk sonder 'n eksplisiete flex-basisof border. Daar is oplossings vir ouer blaaierweergawes, maar dit behoort nie nodig te wees as jou teikenblaaiers nie in die karretjieweergawes val nie.

kol

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

Stel een kolombreedte in

Outo-uitleg vir flexbox-roosterkolomme beteken ook dat jy die breedte van een kolom kan stel en die broers en susterkolomme outomaties die grootte 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.

1 van 3

2 van 3 (wyer)

3 van 3

1 van 3

2 van 3 (wyer)

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>

Veranderlike breedte inhoud

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

1 van 3

Veranderlike breedte inhoud

3 van 3

1 van 3

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

Responsiewe klasse

Bootstrap se rooster bevat vyf 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.

kol

kol-8

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

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

kol-sm-8

kol-sm-4

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

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.

.kol-md-8

.kol-6 .kol-md-4

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

Geute

Geute kan responsief aangepas word deur breekpunt-spesifieke vulling en negatiewe marge-nutsklasse. Om die geute in 'n gegewe ry te verander, koppel 'n negatiewe marge-hulpmiddel op die .rowen bypassende opvulhulpmiddels op die .cols. Die .containerof .container-fluidouer sal dalk ook aangepas moet word om ongewenste oorloop te vermy, deur weer bypassende opvullingshulpmiddel te gebruik.

Hier is 'n voorbeeld van die pasmaak van die Bootstrap-rooster by die groot ( lg) breekpunt en hoër. Ons het die .colvulling vergroot met .px-lg-5, dit teengewerk met .mx-lg-n5op die ouer en dan die omhulsel .rowaangepas met ..container.px-lg-5

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

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.

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

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>

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

Belyning

Gebruik flexbox-belyningshulpmiddels om kolomme vertikaal en horisontaal in lyn te bring. Internet Explorer 10-11 ondersteun nie vertikale belyning van buigsame items wanneer die buighouer 'n min-heightsoos hieronder getoon het nie. Sien Flexbugs #3 vir meer besonderhede.

Vertikale belyning

Een van drie kolomme

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

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

Horisontale belyning

Een van twee kolomme

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

Die geute tussen kolomme in ons vooraf gedefinieerde roosterklasse kan verwyder word met .no-gutters. Dit verwyder die negatiewe margins van .rowen die horisontale paddingvan alle onmiddellike kinders kolomme.

Hier is die bronkode vir die skep van hierdie style. Let daarop dat kolomverwerpings slegs na die eerste kinderkolomme gedek word en via kenmerkkieser geteiken word . Alhoewel dit 'n meer spesifieke kieser genereer, kan kolomvulling steeds verder aangepas word met spasiëringsnutsmiddels .

Het jy 'n rand-tot-rand-ontwerp nodig? Los die ouer .containerof .container-fluid.

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

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

In die praktyk, hier is hoe dit lyk. Let daarop dat jy kan voortgaan om dit te gebruik met alle ander voorafbepaalde roosterklasse (insluitend kolomwydtes, responsiewe vlakke, herbestellings en meer).

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

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

Kolom wikkel

Indien meer as 12 kolomme binne 'n enkele ry geplaas word, sal elke groep ekstra kolomme, as een eenheid, op 'n nuwe lyn toegedraai word.

.kol-9

.col-4
Aangesien 9 + 4 = 13 > 12, word hierdie 4-kolom-wye div op 'n nuwe lyn toegedraai as een aaneenlopende eenheid.

.col-6
Volgende kolomme gaan voort langs die nuwe lyn.

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

Kolom breek

Om kolomme na 'n nuwe lyn in flexbox te breek, vereis 'n klein hack: voeg 'n element by width: 100%waar jy jou kolomme ook al wil omvou na 'n nuwe lyn. Normaalweg word dit met veelvuldige s bewerkstellig .row, maar nie elke implementeringsmetode kan hiervoor rekening hou nie.

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

Jy kan ook hierdie breek by spesifieke breekpunte toepas met ons responsiewe vertoonhulpmiddels .

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

Herrangskik

Bestel klasse

Gebruik .order-klasse om die visuele volgorde van jou inhoud te beheer. Hierdie klasse reageer, so jy kan die orderby breekpunt stel (bv. .order-1.order-md-2). Sluit ondersteuning in vir 1deur 12al vyf roostervlakke.

Eerste in DOM, geen bestelling toegepas nie

Tweede in DOM, met 'n groter bestelling

Derde in DOM, met 'n orde 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>

Daar is ook responsiewe .order-firsten .order-lastklasse wat die ordervan 'n element verander deur onderskeidelik order: -1en order: 13( order: $columns + 1) toe te pas. Hierdie klasse kan ook vermeng word met die genommerde .order-*klasse soos nodig.

Eerste in DOM, laaste bestel

Tweede in DOM, ongeord

Derde in DOM, eerste bestel

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

Verrekening van kolomme

Jy kan roosterkolomme op twee maniere verreken: ons responsiewe .offset-roosterklasse en ons marge-hulpprogramme . Roosterklasse is gegrootte om by kolomme te pas, terwyl marges nuttiger is vir vinnige uitlegte waar die wydte van die afwyking veranderlik is.

Verreken klasse

Skuif kolomme na regs deur .offset-md-*klasse te gebruik. Hierdie klasse vergroot die linkerkantlyn van 'n kolom met *kolomme. .offset-md-4Beweeg byvoorbeeld .col-md-4oor vier kolomme.

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

Benewens die skoonmaak van kolomme by responsiewe breekpunte, moet jy dalk afwykings terugstel. Sien dit in aksie in die roostervoorbeeld .

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

Met die skuif na flexbox in v4, kan u marge-hulpmiddels gebruik soos .mr-autoom broers en susterskolomme van mekaar weg te dwing.

.kol-md-4

.col-md-4 .ml-outo

.col-md-3 .ml-md-outo

.col-auto .mr-auto

.col-outo

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

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

Vlak 1: .col-sm-9

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

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

Snaakse mengsels

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

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

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

Hoofinhoud

Sekondêre 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>

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-columns: 12 !default;
$grid-gutter-width: 30px !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, verskuiwings en ordening uitstuur. Hulpmiddels vir responsiewe sigbaarheid sal ook opgedateer word om die pasgemaakte breekpunte te gebruik. Maak seker dat roosterwaardes in px(nie rem, em, of %) ingestel word nie.