Režģa sistēma

Piemērs

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 skaidrojums par to, kā tīkla sistēma tiek apvienota.

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

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

Kā tas strādā

Sadalot to, režģa sistēma tiek apvienota šādi:

• Mūsu režģis atbalsta sešus atsaucīgus pārtraukumpunktus . Pārtraukuma punkti ir balstīti uz min-widthmultivides vaicājumiem, kas nozīmē, ka tie ietekmē šo pārtraukuma punktu un visus tos, kas atrodas virs tā (piemēram, .col-sm-4attiecas uz sm, md, lg, xl, un xxl). Tas nozīmē, ka varat kontrolēt konteinera un kolonnas izmērus un darbību pēc katra pārtraukuma punkta.

• Konteineri centrējiet un horizontāli novietojiet saturu. Izmantojiet .containeradaptīvam pikseļu platumam, .container-fluidvisiem width: 100%skata logiem un ierīcēm vai reaģējošu konteineru (piem., .container-md) mainīga un pikseļu platuma kombinācijai.

• 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 piemalēm, lai nodrošinātu, ka jūsu kolonnu saturs ir vizuāli izlīdzināts kreisajā pusē. Rindas atbalsta arī modifikatoru klases, lai vienādi piemērotu kolonnu izmērus , un noteku klases , lai mainītu satura atstarpi.

• Kolonnas ir neticami elastīgas. Katrā rindā ir pieejamas 12 veidņu kolonnas, kas ļauj izveidot dažādas elementu kombinācijas, kas aptver jebkuru kolonnu skaitu. Kolonnu klases norāda veidnes kolonnu skaitu, kas jāpārklāj (piemēram, col-4aptver četras). widths ir iestatīti procentos, tāpēc jums vienmēr ir vienāds relatīvais lielums.

• Arī notekcaurules ir atsaucīgas un pielāgojamas. Notekcaurules ir pieejamas visos pārtraukuma punktos ar tādiem pašiem izmēriem kā mūsu piemaļu un polsterējuma atstatums . Mainiet horizontālās notekas ar .gx-*klasēm, vertikālās notekas ar .gy-*, vai visas notekcaurules ar .g-*klasēm. .g-0ir pieejams arī notekcauruļu noņemšanai.

• Sass mainīgie, kartes un kombinācijas nodrošina tīklu. Ja nevēlaties izmantot iepriekš definētās režģa klases programmā Bootstrap, varat izmantot mūsu režģa avotu Sass , lai izveidotu savu ar vairāk semantisko iezīmējumu. Mēs arī iekļaujam dažus pielāgotus CSS rekvizītus, lai izmantotu šos Sass mainīgos, lai nodrošinātu vēl lielāku elastību.

Ņ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

Bootstrap režģa sistēma var pielāgoties visiem sešiem noklusējuma pārtraukuma punktiem un visiem jūsu pielāgotajiem pārtraukuma punktiem. Seši noklusējuma režģa līmeņi ir šādi:

• Īpaši mazs (xs)
• Mazs (sm)
• Vidēja (md)
• Liels (lg)
• Īpaši liels (xl)
• Īpaši īpaši liels (xxl)

Kā minēts iepriekš, katram no šiem pārtraukuma punktiem ir savs konteiners, unikāls klases prefikss un modifikatori. Lūk, kā mainās režģis šajos pārtraukuma punktos.

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

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

Mainīga platuma saturs

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

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

Atsaucīgas klases

Bootstrap režģī ir iekļauti seši iepriekš definētu klašu līmeņi, lai izveidotu sarežģītus reaģējošus 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="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>

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

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

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.

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

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. Ar .row-cols-autojūs varat piešķirt kolonnām to dabisko platumu.

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

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

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

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

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

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

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

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

<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-row-columnstiek izmantots, lai iestatītu maksimālo kolonnu skaitu .row-cols-*, jebkurš skaitlis, kas pārsniedz šo ierobežojumu, tiek ignorēts.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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īta pavisam jauna iepriekš definētu režģa klašu kopa 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 %).