Režģa sistēma

Izmantojiet mūsu jaudīgo mobilajām ierīcēm paredzēto flexbox režģi, lai izveidotu visu formu un izmēru izkārtojumus, pateicoties divpadsmit kolonnu sistēmai, pieciem noklusējuma reaģējošiem līmeņiem, Sass mainīgajiem un mixiniem, kā arī desmitiem iepriekš definētu klašu.

Kā tas strādā

Bootstrap režģa sistēma izmanto virkni konteineru, rindu un kolonnu, lai izkārtotu un izlīdzinātu saturu. Tas ir izveidots ar flexbox un pilnībā reaģē. Tālāk ir sniegts piemērs un padziļināts ieskats režģa veidošanā.

Vai esat jauns vai nepazīstat flexbox? Izlasiet šo CSS triku flexbox rokasgrāmatu , lai uzzinātu pamatinformāciju, terminoloģiju, vadlīnijas un koda fragmentus.

Viena no trim kolonnām

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

Iepriekš minētajā piemērā tiek izveidotas trīs vienāda platuma kolonnas mazās, vidējās, lielās un īpaši lielās ierīcēs, izmantojot mūsu iepriekš definētās režģa klases. Šīs kolonnas ir centrētas lapā ar vecāku .container.

Sadalot to, tas darbojas šādi:

Konteineri nodrošina iespēju centrēt un horizontāli polsterēt jūsu vietnes saturu. Izmantojiet .containeradaptīvam pikseļu platumam vai .container-fluidvisiem width: 100%skata loga un ierīces izmēriem.
Rindas ir kolonnu iesaiņojumi. Katrai kolonnai ir horizontāla padding(saukta par noteku), lai kontrolētu atstarpi starp tām. Pēc paddingtam tas tiek neitralizēts rindās ar negatīvām starpībām. Tādējādi viss jūsu sleju saturs tiek vizuāli izlīdzināts kreisajā pusē.
Režģa izkārtojumā saturs ir jāievieto kolonnās, un tikai kolonnas var būt tiešie rindu atvasinājumi.
Pateicoties flexbox, režģa kolonnas bez noteiktas widthtiks automātiski izkārtotas kā vienāda platuma kolonnas. Piemēram, četri gadījumi .col-smautomātiski būs 25% platumā no mazā pārtraukuma punkta un uz augšu. Vairāk piemēru skatiet sadaļā Automātiskā izkārtojuma kolonnas .
Kolonnu klases norāda kolonnu skaitu, ko vēlaties izmantot no 12 iespējamajām rindām. Tātad, ja vēlaties trīs vienāda platuma kolonnas šķērsām, varat izmantot .col-4.
Kolonnas widths ir iestatītas procentos, tāpēc tās vienmēr ir mainīgas un izmērītas attiecībā pret galveno elementu.
Kolonnām ir horizontāli padding, lai izveidotu notekcaurules starp atsevišķām kolonnām, taču jūs varat noņemt marginno rindām un paddingkolonnām .no-gutters, izmantojot .row.
Lai režģis būtu adaptīvs, ir pieci režģa pārtraukuma punkti, viens katram adaptīvajam pārtraukuma punktam : visi pārtraukuma punkti (īpaši mazi), mazi, vidēji, lieli un īpaši lieli.
Režģa pārtraukuma punkti ir balstīti uz minimālā platuma multivides vaicājumiem, kas nozīmē, ka tie attiecas uz šo vienu pārtraukuma punktu un visiem tiem, kas atrodas virs tā (piemēram, .col-sm-4attiecas uz mazām, vidējām, lielām un īpaši lielām ierīcēm, bet ne uz pirmo xspārtraukuma punktu).
Varat izmantot iepriekš definētas režģa klases (piemēram, .col-4) vai Sass mixins , lai iegūtu vairāk semantiskas iezīmēšanas.

Ņemiet vērā ierobežojumus un kļūdas saistībā ar flexbox , piemēram, nespēju izmantot dažus HTML elementus kā elastīgus konteinerus .

Režģa iespējas

Lai gan Bootstrap izmanto ems vai rems, lai definētu lielāko daļu izmēru, pxs tiek izmantoti režģa pārtraukuma punktiem un konteineru platumiem. Tas ir tāpēc, ka skatvietas platums ir norādīts pikseļos un nemainās līdz ar fonta lielumu .

Skatiet, kā Bootstrap režģa sistēmas aspekti darbojas vairākās ierīcēs, izmantojot ērtu tabulu.

	Īpaši mazs <576 pikseļi	Mazs ≥576 pikseļi	Vidēja ≥768 pikseļi	Liels ≥992 pikseļi	Īpaši liels ≥1200 pikseļi
Maksimālais konteinera platums	Nav (automātiski)	540 pikseļi	720 pikseļi	960 pikseļi	1140 pikseļi
Klases prefikss	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Kolonnu skaits	12
Notekas platums	30 pikseļi (15 pikseļi katrā kolonnas pusē)
Nestabils	Jā
Kolonnu sakārtošana	Jā

Automātiskā izkārtojuma kolonnas

Izmantojiet pārtraukuma punktam raksturīgās kolonnu klases, lai atvieglotu kolonnu lieluma noteikšanu bez nepārprotamas numurētas klases, piemēram, .col-sm-6.

Vienāda platuma

Piemēram, šeit ir divi režģa izkārtojumi, kas attiecas uz katru ierīci un skata logu, no xslīdz xl. Pievienojiet neierobežotu skaitu klases bez vienībām katram nepieciešamajam pārtraukuma punktam, un katra kolonna būs vienāda platuma.

1 no 2

2 no 2

1 no 3

2 no 3

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

Vienāda platuma daudzrindu

Izveidojiet vienāda platuma kolonnas, kas aptver vairākas rindiņas, ievietojot vietu, .w-100kur vēlaties, lai kolonnas pāriet uz jaunu rindiņu. Padariet pārtraukumus atsaucīgus, sajaucot .w-100ar dažām adaptīvām displeja utilītiem .

Bija Safari flexbox kļūda , kas neļāva tai darboties bez skaidra flex-basisvai border. Ir risinājumi vecākām pārlūkprogrammu versijām, taču tie nav nepieciešami, ja jūsu mērķa pārlūkprogrammas neietilpst kļūdainās versijās.

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>

Vienas kolonnas platuma iestatīšana

Flexbox režģa kolonnu automātiskais izkārtojums arī nozīmē, ka varat iestatīt vienas kolonnas platumu un automātiski mainīt ap to esošo kolonnu izmērus. Varat izmantot iepriekš definētas režģa klases (kā parādīts zemāk), režģa kombinācijas vai iekļauto platumu. Ņemiet vērā, ka pārējās kolonnas tiks mainītas neatkarīgi no centrālās kolonnas platuma.

1 no 3

2 no 3 (plašāks)

3 no 3

1 no 3

2 no 3 (plašāks)

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

Mainīga platuma saturs

Izmantojiet col-{breakpoint}-autoklases, lai iestatītu kolonnu izmērus, pamatojoties uz to satura dabisko platumu.

1 no 3

Mainīga platuma saturs

3 no 3

1 no 3

Mainīga platuma saturs

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

Atsaucīgas klases

Bootstrap režģī ir iekļauti pieci iepriekš definētu klašu līmeņi, lai izveidotu sarežģītus, atsaucīgus izkārtojumus. Pielāgojiet sleju izmērus īpaši mazās, mazās, vidējās, lielās vai īpaši lielās ierīcēs, kā vien vēlaties.

Visi pārtraukuma punkti

Režģiem, kas ir vienādi no mazākajām ierīcēm līdz lielākajiem, izmantojiet .colun .col-*klases. Norādiet numurētu klasi, ja nepieciešama īpaša izmēra kolonna; pretējā gadījumā jūtieties brīvi pieturēties pie .col.

kol

kolonna-8

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

Sakrauts horizontāli

Izmantojot vienu .col-sm-*klašu kopu, varat izveidot pamata režģa sistēmu, kas sākas sakrauta un kļūst horizontāla mazajā pārtraukuma punktā ( 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>

Sajauc un savieno

Vai nevēlaties, lai jūsu kolonnas vienkārši tiktu sakrautas dažos režģa līmeņos? Katram līmenim pēc vajadzības izmantojiet dažādu klašu kombināciju. Skatiet tālāk sniegto piemēru, lai iegūtu labāku priekšstatu par to, kā tas viss darbojas.

.col-md-8

.col-6 .col-md-4

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

Notekcaurules

Notekcaurules var atbilstoši pielāgot, izmantojot pārtraukuma punktam raksturīgu polsterējumu un negatīvas piemales lietderības klases. Lai mainītu notekcaurules noteiktā rindā, savienojiet pārī negatīvās piemales utilītu uz s .rowun atbilstošo polsterējuma utilītu .col. Lai izvairītos no nevēlamas pārplūdes, iespējams, būs jāpielāgo arī pamatelements .containervai vecāks, izmantojot vēlreiz atbilstošu polsterējuma utilītu..container-fluid

Šeit ir piemērs Bootstrap režģa pielāgošanai lielajā ( lg) pārtraukuma punktā un augstāk. Mēs esam palielinājuši .colpolsterējumu ar .px-lg-5, neitralizējuši to, izmantojot .mx-lg-n5vecāku .rowun pēc tam pielāgojām .containeraptinumu ar .px-lg-5.

Pielāgots kolonnu polsterējums

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

Rindu kolonnas

Izmantojiet adaptīvās .row-cols-*klases, lai ātri iestatītu to kolonnu skaitu, kas vislabāk atveido jūsu saturu un izkārtojumu. Tā kā parastās .col-*klases attiecas uz atsevišķām kolonnām (piemēram, .col-md-4), rindu kolonnu klases ir iestatītas vecākajā .rowkā saīsne.

Izmantojiet šīs rindu kolonnu klases, lai ātri izveidotu pamata režģa izkārtojumus vai kontrolētu karšu izkārtojumus.

Kolonna

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

Kolonna

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

Kolonna

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

Kolonna

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

Kolonna

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

Varat arī izmantot pievienoto 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);
  }
}

Izlīdzināšana

Izmantojiet flexbox līdzināšanas utilītas, lai vertikāli un horizontāli izlīdzinātu kolonnas. Internet Explorer 10–11 neatbalsta elastīgo vienumu vertikālo līdzināšanu, ja elastīgajam konteineram ir, min-heightkā parādīts tālāk. Plašāku informāciju skatiet Flexbugs #3.

Vertikālā izlīdzināšana

Viena no trim kolonnām

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

Viena no trim kolonnām

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

Horizontālā izlīdzināšana

Viena no divām kolonnām

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

Nekādu notekcauruļu

Notekcaurules starp kolonnām mūsu iepriekš definētajās režģa klasēs var noņemt, izmantojot .no-gutters. Tādējādi tiek noņemti negatīvie margins no visām tiešajām atvasinātajām kolonnām .rowun horizontālie elementi.padding

Šeit ir avota kods šo stilu izveidei. Ņemiet vērā, ka kolonnu ignorēšanas tvērums attiecas tikai uz pirmajām pakārtotajām kolonnām un tiek atlasīts, izmantojot atribūtu atlasītāju . Lai gan tas ģenerē specifiskāku atlasītāju, kolonnu polsterējumu joprojām var pielāgot, izmantojot atstarpju utilītas .

Nepieciešams dizains no malas līdz malai? Atlaidiet vecāku .containervai .container-fluid.

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

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

Praksē tas izskatās šādi. Ņemiet vērā, ka varat turpināt to izmantot ar visām pārējām iepriekš definētajām režģa klasēm (tostarp kolonnu platumiem, adaptīviem līmeņiem, pārkārtojumiem un citiem).

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

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

Kolonnu ietīšana

Ja vienā rindā ir ievietotas vairāk nekā 12 kolonnas, katra papildu kolonnu grupa kā viena vienība tiks aplauzta jaunā rindā.

.col-9

.col-4
Tā kā 9 + 4 = 13 > 12, šis 4 kolonnu platums tiek ietīts jaunā rindā kā viena blakus vienība.

.col-6
Nākamās kolonnas turpinās pa jauno līniju.

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

Kolonnu pārtraukumi

Lai sadalītu kolonnas uz jaunu rindiņu programmā flexbox, ir nepieciešams neliels uzlauzums: pievienojiet elementu ar vietu, width: 100%kur vēlaties aplauzt kolonnas, jaunai rindai. Parasti tas tiek paveikts ar vairākiem .rows, bet ne katra ieviešanas metode var to ņemt vērā.

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

Varat arī lietot šo pārtraukumu noteiktos pārtraukuma punktos, izmantojot mūsu adaptīvās displeja utilītas .

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

Pārkārtošana

Pasūtiet nodarbības

Izmantojiet .order-klases, lai kontrolētu sava satura vizuālo secību . Šīs klases ir adaptīvas, tāpēc varat iestatīt orderpēc pārtraukuma punktu (piemēram, .order-1.order-md-2). Ietver atbalstu 1caurbraukšanai 12visos piecos režģa līmeņos.

Vispirms DOM, pasūtījums netika piemērots

Otrais DOM, ar lielāku pasūtījumu

Trešais DOM, ar secību 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>

Ir arī adaptīvās .order-firstun .order-lastklases, kas maina orderelementa vērtību, attiecīgi piemērojot order: -1un order: 13( order: $columns + 1). Šīs nodarbības pēc vajadzības var arī sajaukt ar numurētajām .order-*klasēm.

Pirmais DOM, pasūtīts pēdējais

Otrais DOM, nesakārtots

Trešais DOM, pasūtīts pirmais

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

Kolonnu nobīde

Varat kompensēt režģa kolonnas divos veidos: mūsu adaptīvās .offset-režģa klases un mūsu rezerves utilītas . Režģa klases ir pielāgotas kolonnām, savukārt piemales ir noderīgākas ātrajiem izkārtojumiem, kur nobīdes platums ir mainīgs.

Ofseta klases

Pārvietojiet kolonnas pa labi, izmantojot .offset-md-*klases. Šīs klases palielina kolonnas kreiso malu par *kolonnām. Piemēram, .offset-md-4pārvietojas .col-md-4pa četrām kolonnām.

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

Papildus kolonnu dzēšanai adaptīvos pārtraukumpunktos, iespējams, būs jāatiestata nobīdes. Skatiet to darbībā režģa piemērā .

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

Maržas komunālie pakalpojumi

Pārejot uz flexbox 4. versijā, varat izmantot piemales utilītprogrammas, piemēram .mr-auto, lai piespiestu kolonnas atdalīt vienu no otras.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

Ligzdošana

Lai ligzdotu saturu ar noklusējuma režģi, esošajā kolonnā pievienojiet jaunu kolonnu .rowkopu . Ligzdotajās rindās ir jāietver kolonnu kopa, kurā ir 12 vai mazāk (nav obligāti jāizmanto visas 12 pieejamās kolonnas)..col-sm-*.col-sm-*

1. līmenis: .col-sm-9

2. līmenis: .col-8 .col-sm-6

2. līmenis: .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>

Sass mixins

Izmantojot Bootstrap avota Sass failus, jums ir iespēja izmantot Sass mainīgos un mixins, lai izveidotu pielāgotus, semantiskus un atsaucīgus lapu izkārtojumus. Mūsu iepriekš definētās režģa klases izmanto šos pašus mainīgos un miksus, lai nodrošinātu visu lietošanai gatavu klašu komplektu ātri reaģējošiem izkārtojumiem.

Mainīgie lielumi

Mainīgie un kartes nosaka kolonnu skaitu, notekas platumu un multivides vaicājuma punktu, kurā sākt peldošās kolonnas. Mēs tos izmantojam, lai ģenerētu iepriekš definētās režģa klases, kas dokumentētas iepriekš, kā arī tālāk uzskaitītajiem pielāgotajiem maisījumiem.

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

Maisījumi

Mixins tiek izmantoti kopā ar režģa mainīgajiem, lai ģenerētu semantisko CSS atsevišķām režģa kolonnām.

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

Lietošanas piemērs

Varat modificēt mainīgos uz savām pielāgotajām vērtībām vai vienkārši izmantot mixinus ar to noklusējuma vērtībām. Šeit ir piemērs noklusējuma iestatījumu izmantošanai, lai izveidotu divu kolonnu izkārtojumu ar atstarpi.

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

Galvenais saturs

Sekundārais saturs

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

Režģa pielāgošana

Izmantojot mūsu iebūvētos režģa Sass mainīgos un kartes, ir iespējams pilnībā pielāgot iepriekš definētās režģa klases. Mainiet līmeņu skaitu, multivides vaicājuma izmērus un konteinera platumus un pēc tam atkārtoti kompilējiet.

Kolonnas un notekcaurules

Režģa kolonnu skaitu var mainīt, izmantojot Sass mainīgos. $grid-columnstiek izmantots, lai ģenerētu katras atsevišķas kolonnas platumu (procentos), vienlaikus $grid-gutter-widthiestatot kolonnu noteku platumu.

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

Režģa līmeņi

Pārvietojoties ārpus pašām kolonnām, varat arī pielāgot režģa līmeņu skaitu. Ja vēlaties tikai četrus režģa līmeņus, atjauniniet $grid-breakpointsun $container-max-widthsuz kaut ko līdzīgu:

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

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

Veicot izmaiņas Sass mainīgajos vai kartēs, izmaiņas ir jāsaglabā un jāpārkompilē. To darot, tiks izvadīts pavisam jauns iepriekš definētu režģa klašu komplekts kolonnu platumam, nobīdēm un secībai. Tiks atjauninātas arī atsaucīgās redzamības utilītas, lai izmantotu pielāgotos pārtraukumpunktus. Noteikti iestatiet režģa vērtības px(nevis rem, em, vai %).