Ratkerfi

Notaðu öfluga farsíma-fyrstu flexbox ristina okkar til að búa til skipulag af öllum stærðum og gerðum þökk sé tólf dálkakerfi, fimm sjálfgefnum móttækilegum stigum, Sass breytum og blöndunum og tugum fyrirfram skilgreindra flokka.

Hvernig það virkar

Gridkerfi Bootstrap notar röð gáma, raða og dálka til að skipuleggja og samræma efni. Það er smíðað með flexbox og er fullkomlega móttækilegt. Hér að neðan er dæmi og ítarleg skoðun á því hvernig ristið kemur saman.

Nýr eða þekkir ekki flexbox? Lestu þessa CSS Tricks flexbox handbók fyrir bakgrunn, hugtök, leiðbeiningar og kóðabúta.

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

Dæmið hér að ofan býr til þrjá jafnbreiða dálka á litlum, meðalstórum, stórum og sérstaklega stórum tækjum með því að nota fyrirfram skilgreinda töfluflokka okkar. Þessir dálkar eru miðaðir á síðunni með foreldri .container.

Að sundurliða það, hér er hvernig það virkar:

• Gámar bjóða upp á leið til að miðja og lárétt fylla innihald síðunnar þinnar. Notaðu .containerfyrir móttækilega pixlabreidd eða .container-fluidfyrir width: 100%allar útsýnisgáttir og tækjastærðir.
• Raðir eru umbúðir fyrir dálka. Hver súla hefur lárétt padding(kallað renna) til að stjórna bilinu á milli þeirra. Þessu paddinger síðan brugðist á línum með neikvæðum framlegð. Þannig er allt efni í dálkunum þínum sjónrænt stillt niður vinstra megin.
• Í töfluskipulagi verður að setja efni innan dálka og aðeins dálkar mega vera strax börn raða.
• Þökk sé flexbox munu ristdálkar án tilgreinds widthsjálfkrafa vera jafn breiðar dálkar. Til dæmis, fjögur tilvik af .col-smverða hvert um sig sjálfkrafa 25% breitt frá litla brotpunktinum og upp. Sjá dálkahluta sjálfvirkrar útsetningar fyrir fleiri dæmi.
• Dálkaflokkar gefa til kynna fjölda dálka sem þú vilt nota af mögulegum 12 í hverri röð. Svo, ef þú vilt þrjá jafnbreiða dálka þvert á, geturðu notað .col-4.
• Dálk widths eru stillt í prósentum, þannig að þau eru alltaf fljótandi og stór miðað við móðurþáttinn.
• Dálkar hafa lárétt paddingtil að búa til þakrennur á milli einstakra dálka, hins vegar er hægt að fjarlægja marginúr röðum og paddingúr dálkum með .no-guttersá .row.
• Til að gera ristið viðkvæmt, eru fimm rist brotpunktar, einn fyrir hvern móttækilegan brotpunkt : allir brotpunktar (extra lítill), lítill, miðlungs, stór og extra stór.
• Brotpunktar fyrir hnitanet eru byggðir á miðlunarfyrirspurnum með lágmarksbreidd, sem þýðir að þeir eiga við þennan eina brotpunkt og alla þá fyrir ofan hann (td .col-sm-4á við um lítil, meðalstór, stór og sérstaklega stór tæki, en ekki fyrsta xsbrotpunktinn).
• Þú getur notað fyrirfram skilgreinda grid flokka (eins og .col-4) eða Sass mixins fyrir merkingarlegri merkingu.

Vertu meðvituð um takmarkanir og villur í kringum flexbox , eins og vanhæfni til að nota suma HTML þætti sem flexílát .

Grid valkostir

Þó Bootstrap noti ems eða rems til að skilgreina flestar stærðir, pxeru s notaðar fyrir rist brotpunkta og gámabreidd. Þetta er vegna þess að breidd útsýnisins er í pixlum og breytist ekki með leturstærðinni .

Sjáðu hvernig þættir Bootstrap-netkerfisins virka á mörgum tækjum með handhægri töflu.

Sjálfvirk uppsetning dálka

Notaðu dálkaflokka sem eru sérstakir fyrir brotpunkta til að auðvelda dálkstærð án skýrs tölusetts flokks eins og .col-sm-6.

Jafn breidd

Til dæmis eru hér tvö hnitakerfi sem eiga við um hvert tæki og útsýnisgátt, frá xstil xl. Bættu við hvaða fjölda einingalausra flokka sem er fyrir hvern brotpunkt sem þú þarft og hver dálkur verður í sömu breidd.

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

Jafna breidd dálka er hægt að skipta í margar línur, en það var Safari flexbox galla sem kom í veg fyrir að þetta virkaði án skýrs flex-basiseða border. Það eru til lausnir fyrir eldri vafraútgáfur, en þær ættu ekki að vera nauðsynlegar ef þú ert uppfærður.

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

Stilla einn dálk breidd

Sjálfvirk uppsetning fyrir flexbox grid dálka þýðir einnig að þú getur stillt breidd eins dálks og látið systkinasúlurnar sjálfkrafa breyta stærð í kringum hann. Þú getur notað fyrirfram skilgreinda ristflokka (eins og sýnt er hér að neðan), ristblöndur eða innbyggðar breiddir. Athugaðu að hinir dálkarnir munu breyta stærð, sama hversu breidd miðdálkurinn er.

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

Innihald með breytilegri breidd

Notaðu col-{breakpoint}-autoflokka til að stærð dálka út frá náttúrulegri breidd innihalds þeirra.

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

Jafn breiðar fjölraðir

Búðu til jafnbreiða dálka sem spanna margar raðir með því að setja inn .w-100þar sem þú vilt að dálkarnir brotni í nýja línu. Gerðu hléin móttækileg með því að blanda þeim saman .w-100við nokkur móttækileg skjától .

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

Móttækilegur flokkur

Grindanet Bootstrap inniheldur fimm stig af fyrirfram skilgreindum flokkum til að byggja upp flókin móttækileg skipulag. Sérsníddu stærð dálka þinna á sérstaklega litlum, litlum, meðalstórum, stórum eða stórum tækjum eins og þér sýnist.

Öll brot

.colNotaðu og .col-*flokkana fyrir hnitanet sem eru eins frá minnstu tækjum til þeirra stærstu . Tilgreindu númeraðan flokk þegar þú þarft sérstaklega stóran dálk; annars skaltu ekki hika við að halda þig við .col.

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

Staflað í lárétt

Með því að nota eitt sett af .col-sm-*flokkum geturðu búið til grunnnetkerfi sem byrjar staflað og verður lárétt við litla brotpunktinn ( sm).

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

Blandaðu saman

Viltu ekki að dálkarnir þínir staflast einfaldlega í einhver töflustig? Notaðu blöndu af mismunandi flokkum fyrir hvert stig eftir þörfum. Sjá dæmið hér að neðan til að fá betri hugmynd um hvernig þetta allt virkar.

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

Jöfnun

Notaðu flexbox jöfnunartól til að samræma dálka lóðrétt og lárétt.

Lóðrétt jöfnun

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

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

Lárétt jöfnun

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

Engar þakrennur

Hægt er að fjarlægja rennurnar á milli dálka í fyrirfram skilgreindum gridflokkum okkar með .no-gutters. Þetta fjarlægir neikvæðu margins úr .rowog láréttu paddingúr öllum dálkum fyrir næstu börn.

Hér er frumkóði til að búa til þessa stíla. Athugaðu að dálkahnekkingar eru aðeins settar í fyrstu undirdálka og miða á eigindavali . Þó að þetta framkalli sértækari veljara, er samt hægt að aðlaga dálkfyllingu frekar með biltólum .

Þarftu brún til brún hönnun? Slepptu foreldri .containereða .container-fluid.

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

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

Í reynd, hér er hvernig það lítur út. Athugaðu að þú getur haldið áfram að nota þetta með öllum öðrum fyrirfram skilgreindum töfluflokkum (þar á meðal dálkabreiddum, móttækilegum flokkum, endurpöntunum og fleira).

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

Súluumbúðir

Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.

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

Dálkaskil

Að brjóta dálka í nýja línu í flexbox krefst smá hakks: bættu við þætti með width: 100%hvar sem þú vilt vefja dálkana þína í nýja línu. Venjulega er þetta gert með mörgum .rows, en ekki sérhver útfærsluaðferð getur gert grein fyrir þessu.

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

Þú getur líka notað þetta hlé á tilteknum brotastöðum með móttækilegum skjátólum okkar .

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

Endurröðun

Pantaðu námskeið

Notaðu .order-flokka til að stjórna sjónrænni röð efnisins þíns. Þessir flokkar eru móttækilegir, svo þú getur stillt ordereftir brotpunkt (td .order-1.order-md-2). Inniheldur stuðning í 1gegnum 12öll fimm netþrep.

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

Það eru líka móttækilegir flokkar .order-firstog .order-lastflokkar sem breyta orderfrumefni með því að nota order: -1og order: 13( order: $columns + 1), í sömu röð. Þessum flokkum er einnig hægt að blanda saman við númeruðu .order-*flokkana eftir þörfum.

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

Á móti dálkum

Þú getur jafnað töflusúlur á tvo vegu: móttækilegir .offset-töfluflokkar okkar og framlegðartæki . Grid flokkar eru stærðir til að passa við dálka á meðan spássíur eru gagnlegri fyrir fljótleg skipulag þar sem breidd offsetsins er breytileg.

Offset flokkar

Færðu dálka til hægri með því að nota .offset-md-*flokka. Þessir flokkar auka vinstri spássíu dálks með *dálkum. Til dæmis .offset-md-4færist .col-md-4yfir fjóra dálka.

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

Auk dálkahreinsunar á móttækilegum brotastöðum gætirðu þurft að endurstilla frávik. Sjáðu þetta í aðgerð í töfludæminu .

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

Framlegðarveitur

Með flutningnum yfir í flexbox í v4 geturðu notað framlegðartól eins og .mr-autoað þvinga systkinasúlur frá hver öðrum.

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

Hreiður

Til að hreiðra efnið þitt með sjálfgefna hnitanetinu skaltu bæta við nýjum .rowog setti .col-sm-*dálka innan núverandi .col-sm-*dálks. Hreiður línur ættu að innihalda sett af dálkum sem eru allt að 12 eða færri (það er ekki krafist að þú notir alla 12 tiltæka dálka).

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

Snilldar blöndur

Þegar þú notar uppruna Sass skrár frá Bootstrap hefurðu möguleika á að nota Sass breytur og mixins til að búa til sérsniðnar, merkingarlegar og móttækilegar síðuuppsetningar. Forskilgreindir netflokkar okkar nota þessar sömu breytur og blöndun til að bjóða upp á heilan pakka af tilbúnum flokkum fyrir fljótvirkt móttækilegt skipulag.

Breytur

Breytur og kort ákvarða fjölda dálka, breidd þakrennunnar og miðlunarfyrirspurnarstaðinn þar sem fljótandi dálkar hefjast. Við notum þetta til að búa til fyrirfram skilgreinda töfluflokka sem eru skjalfestir hér að ofan, sem og fyrir sérsniðnu blöndurnar sem taldar eru upp hér að neðan.

$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

Mixin eru notuð í tengslum við grid breytur til að búa til merkingarlega CSS fyrir einstaka rist dálka.

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

Dæmi um notkun

Þú getur breytt breytunum í eigin sérsniðin gildi, eða bara notað mixin með sjálfgefnum gildum. Hér er dæmi um að nota sjálfgefnar stillingar til að búa til tveggja dálka skipulag með bili á milli.

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

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

Aðlaga ristina

Með því að nota innbyggðu Sass breyturnar og kortin okkar er hægt að sérsníða fyrirfram skilgreinda töfluflokka algjörlega. Breyttu fjölda flokka, víddum miðilsfyrirspurna og gámabreiddum - settu síðan saman aftur.

Súlur og þakrennur

Hægt er að breyta fjölda ristdálka með Sass breytum. $grid-columnser notað til að búa til breidd (í prósentum) hvers einstaks dálks á meðan $grid-gutter-widthstillir breidd fyrir súlurennur.

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

Grid tiers

Með því að fara út fyrir dálkana sjálfa geturðu líka sérsniðið fjölda töfluþrepa. Ef þú vildir bara fjórar töflustig myndirðu uppfæra $grid-breakpointsog $container-max-widthsí eitthvað eins og þetta:

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

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

Þegar þú gerir einhverjar breytingar á Sass breytunum eða kortunum þarftu að vista breytingarnar og setja saman aftur. Með því að gera það mun gefa út glænýtt sett af fyrirfram skilgreindum töfluflokkum fyrir dálkabreidd, frávik og röðun. Móttækileg sýnileikatól verða einnig uppfærð til að nota sérsniðna brotpunkta. Gakktu úr skugga um að stilla töflugildi í px(ekki rem, em, eða %).