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.

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

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.

<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 kolonnas var sadalīt vairākās rindās, taču bija Safari flexbox kļūda , kas neļāva tai darboties bez tiešas flex-basisvai border. Ir risinājumi vecākām pārlūkprogrammu versijām, taču tie nav nepieciešami, ja esat atjaunināts.

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

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.

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

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

Vienāda platuma daudzrindu

Izveidojiet vienāda platuma kolonnas, kas aptver vairākas rindas, 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ītprogrammām .

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

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.

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

Sakrauts horizontāli

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

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.

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

Izlīdzināšana

Izmantojiet flexbox līdzināšanas utilītas, lai vertikāli un horizontāli izlīdzinātu kolonnas.

Vertikālā izlīdzināšana

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

Horizontālā izlīdzināšana

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

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

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

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

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

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

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

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

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.

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

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.

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

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.

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

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

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

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.

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

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

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

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

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 platumus (procentos), vienlaikus $grid-gutter-widthpieļaujot pārtraukuma punktam specifiskus platumus, kas ir vienmērīgi sadalīti pa kolonnu notekcaurulēm padding-leftun tām.padding-right

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