Ratkerfi

Dæmi

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 útskýring á því hvernig netkerfið kemur saman.

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

Dæmið hér að ofan býr til þrjá jafnbreiða dálka í öllum tækjum og útsýnisgluggum með því að nota fyrirfram skilgreinda töfluflokka okkar. Þessir dálkar eru miðaðir á síðunni með foreldri .container.

Hvernig það virkar

Ef það er sundurliðað, hér er hvernig ristkerfið kemur saman:

• Grindanetið okkar styður sex móttækilega brotpunkta . Brotpunktar eru byggðir á min-widthfjölmiðlafyrirspurnum, sem þýðir að þeir hafa áhrif á þann brotpunkt og alla þá fyrir ofan hann (td .col-sm-4á við um sm, md, lg, xl, og xxl). Þetta þýðir að þú getur stjórnað stærð gáma og dálka og hegðun eftir hverjum brotpunkti.

• Gámar miðja og lárétt fylla efnið þitt. Notaðu .containerfyrir móttækilega pixlabreidd, .container-fluidfyrir width: 100%yfir öll útsýni og tæki, eða móttækilega ílát (td .container-md) fyrir samsetningu vökva- og pixlabreiddar.

• 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 spássíur til að tryggja að innihald dálkanna þinna sé sjónrænt stillt niður vinstra megin. Raðir styðja einnig breytingaflokka til að beita dálkstærð og rennuflokkum jafnt til að breyta bilinu á efninu þínu.

• Dálkar eru ótrúlega sveigjanlegir. Það eru 12 sniðmátsdálkar í boði í hverri röð, sem gerir þér kleift að búa til mismunandi samsetningar af þáttum sem spanna hvaða fjölda dálka sem er. Dálkaflokkar gefa til kynna fjölda sniðmátsdálka sem á að spanna (td col-4spannar fjóra). widths eru stillt í prósentum þannig að þú hefur alltaf sömu hlutfallslegu stærðina.

• Rennur eru líka móttækilegar og sérhannaðar. Rennunámskeið eru í boði á öllum brotastöðum, með öllum sömu stærðum og spássíur og fyllingarbil okkar . Breyttu láréttum þakrennum með .gx-*flokkum, lóðréttum þakrennum með .gy-*eða öllum rennum með .g-*flokkum. .g-0er einnig hægt að fjarlægja þakrennur.

• Sass breytur, kort og mixins knýja netið. Ef þú vilt ekki nota fyrirfram skilgreinda grid flokka í Bootstrap, geturðu notað Sass uppspretta grid okkar til að búa til þína eigin með merkingarlegri merkingu. Við tökum einnig nokkrar sérsniðnar CSS-eiginleika til að neyta þessara Sass breytna fyrir enn meiri sveigjanleika fyrir þig.

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

Ratkerfi Bootstrap getur aðlagað sig á öllum sex sjálfgefnum brotpunktum og öllum brotpunktum sem þú sérsniðið. Sjálfgefna netþrepin sex eru sem hér segir:

• Extra lítill (xs)
• Lítil (sm)
• Miðlungs (md)
• Stór (lg)
• Extra stór (xl)
• Extra extra stór (xxl)

Eins og fram kemur hér að ofan, hafa hver þessara brotpunkta sinn eigin ílát, einstakt flokksforskeyti og breytingar. Hér er hvernig hnitanetið breytist á milli þessara brota:

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

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

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

Móttækilegur flokkur

Rat Bootstrap inniheldur sex 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="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>

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

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.

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

Röð dálkar

Notaðu móttækilega .row-cols-*flokkana til að stilla fljótt þann fjölda dálka sem best birtir innihald þitt og skipulag. Þar sem venjulegir .col-*flokkar eiga við um einstaka dálka (td, .col-md-4), eru flokkar línudálka stilltir á foreldri .rowsem flýtileið. Með .row-cols-autoer hægt að gefa súlunum náttúrulega breidd sína.

Notaðu þessa röð dálkaflokka til að búa til grunnnetsuppsetningar fljótt eða til að stjórna kortauppsetningum þínum.

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

Þú getur líka notað meðfylgjandi Sass mixin 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);
  }
}

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

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

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

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

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

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-row-columnser notað til að stilla hámarksfjölda dálka af .row-cols-*, allir tölur yfir þessum mörkum eru hunsaðar.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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
);

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).