Tinklelio sistema

Naudokite mūsų galingą mobiliesiems skirtą „flexbox“ tinklelį, kad sukurtumėte visų formų ir dydžių maketus dėl dvylikos stulpelių sistemos, penkių numatytųjų reaguojančių pakopų, „Sass“ kintamųjų ir mišinių bei daugybės iš anksto nustatytų klasių.

Kaip tai veikia

„Bootstrap“ tinklelio sistema naudoja daugybę konteinerių, eilučių ir stulpelių, kad išdėstytų ir sulygiuotų turinį. Jis sukurtas naudojant „ flexbox “ ir visiškai reaguoja. Žemiau pateikiamas pavyzdys ir nuodugniai apžvelgiama, kaip tinklelis susijungia.

Naujokas ar nesate susipažinęs su „flexbox“? Perskaitykite šį CSS Tricks lanksčiojo dėžutės vadovą , kad sužinotumėte foną, terminiją, gaires ir kodo 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>

Aukščiau pateiktame pavyzdyje sukuriami trys vienodo pločio stulpeliai mažuose, vidutiniuose, dideliuose ir ypač dideliuose įrenginiuose, naudojant mūsų iš anksto nustatytas tinklelio klases. Tie stulpeliai yra puslapio centre su pirminiu stulpeliu .container.

Išskaidžius tai, kaip tai veikia:

• Sudėtiniai rodiniai suteikia galimybę centruoti ir horizontaliai išdėstyti svetainės turinį. Naudokite .containerjautriam pikselių pločiui arba .container-fluidvisų width: 100%dydžių peržiūrai.
• Eilutės yra stulpelių įvyniojimai. Kiekviena kolona turi horizontalią padding(vadinamą lataku), skirtą tarpai tarp jų valdyti. Tada paddingtai neutralizuojama eilutėse su neigiamomis paraštėmis. Tokiu būdu visas jūsų stulpelių turinys vizualiai išlygiuotas kairėje pusėje.
• Tinklelio išdėstyme turinys turi būti dedamas į stulpelius ir tik stulpeliai gali būti tiesioginiai eilučių antriniai elementai.
• „Flexbox“ dėka tinklelio stulpeliai be nurodyto widthbus automatiškai išdėstyti kaip vienodo pločio stulpeliai. Pavyzdžiui, keturi atvejai .col-smautomatiškai bus 25 % pločio nuo mažos pertraukos taško ir daugiau. Daugiau pavyzdžių žr. automatinio išdėstymo stulpelių skyriuje.
• Stulpelių klasės nurodo stulpelių, kuriuos norite naudoti, skaičių iš 12 vienoje eilutėje. Taigi, jei norite, kad skersai būtų trys vienodo pločio stulpeliai, galite naudoti .col-4.
• Stulpeliai widthnustatomi procentais, todėl jie visada yra sklandūs ir dydžio, palyginti su pirminiu elementu.
• Stulpeliai yra horizontalūs padding, kad būtų sukurti latakai tarp atskirų stulpelių, tačiau galite pašalinti marginiš eilučių ir paddingstulpelių .no-guttersnaudodami .row.
• Kad tinklelis būtų jautrus, yra penki tinklelio lūžio taškai, po vieną kiekvienam interaktyviam lūžio taškui : visi lūžio taškai (ypač maži), maži, vidutiniai, dideli ir ypač dideli.
• Tinklelio lūžio taškai pagrįsti minimalaus pločio medijos užklausomis, tai reiškia, kad jie taikomi tam vienam lūžio taškui ir visiems virš jo esantiems (pvz., .col-sm-4taikomi mažiems, vidutiniams, dideliems ir ypač dideliems įrenginiams, bet ne pirmajam xslūžio taškui).
• Norėdami gauti daugiau semantinio žymėjimo, galite naudoti iš anksto nustatytas tinklelio klases (pvz ., .col-4) arba Sass mišinius .

Žinokite apie „flexbox“ apribojimus ir klaidas , pvz., negalėjimą naudoti kai kurių HTML elementų kaip lanksčiuosius konteinerius .

Tinklelio parinktys

Nors Bootstrap naudoja ems arba rems daugumai dydžių apibrėžti, pxs naudojami tinklelio lūžio taškams ir konteinerio pločiams. Taip yra todėl, kad peržiūros srities plotis yra pikseliais ir nesikeičia atsižvelgiant į šrifto dydį .

Sužinokite, kaip Bootstrap tinklelio sistemos aspektai veikia keliuose įrenginiuose, naudodami patogią lentelę.

Automatinio išdėstymo stulpeliai

Norėdami lengvai nustatyti stulpelių dydį be aiškios sunumeruotos klasės, pvz., , naudokite lūžio taško stulpelių klases .col-sm-6.

Vienodo pločio

Pavyzdžiui, čia yra du tinklelio išdėstymai, taikomi kiekvienam įrenginiui ir peržiūros zonai nuo xsiki xl. Pridėkite bet kokį klasių be vienetų skaičių prie kiekvieno reikalingo lūžio taško ir kiekvienas stulpelis bus tokio pat pločio.

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

Vienodo pločio stulpelius galima suskaidyti į kelias eilutes, tačiau buvo „ Safari flexbox“ klaida , kuri neleido tai veikti be aiškaus flex-basisarba border. Yra problemų, susijusių su senesnėmis naršyklės versijomis, tačiau jie neturėtų būti būtini, jei esate naujausia versija.

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

Vieno stulpelio pločio nustatymas

Automatinis „flexbox“ tinklelio stulpelių išdėstymas taip pat reiškia, kad galite nustatyti vieno stulpelio plotį ir automatiškai keisti stulpelių dydį aplink jį. Galite naudoti iš anksto nustatytas tinklelio klases (kaip parodyta toliau), tinklelio mišinius arba eilutinius plotius. Atminkite, kad kitų stulpelių dydis bus pakeistas nepriklausomai nuo centrinio stulpelio pločio.

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

Kintamo pločio turinys

Naudokite col-{breakpoint}-autoklases, kad nustatytumėte stulpelių dydį pagal natūralų jų turinio plotį.

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

Vienodo pločio kelių eilių

Kurkite vienodo pločio stulpelius, apimančius kelias eilutes, įterpdami vietą, .w-100kurioje norite, kad stulpeliai būtų pertraukti į naują eilutę. Padarykite pertraukas jautrias sumaišydami .w-100su kai kuriomis reaguojančiomis rodymo programomis .

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

Atsakingos klasės

„Bootstrap“ tinklelis apima penkias iš anksto nustatytų klasių pakopas, skirtas sukurti sudėtingus, reaguojančius išdėstymus. Tinkinkite stulpelių dydį ypač mažuose, mažuose, vidutiniuose, dideliuose ar ypač dideliuose įrenginiuose, kaip jums atrodo tinkama.

Visi lūžio taškai

Tinklams, kurie yra vienodi nuo mažiausio įrenginio iki didžiausio, naudokite .colir .col-*klases. Nurodykite sunumeruotą klasę, kai jums reikia ypatingo dydžio stulpelio; kitu atveju nedvejodami laikykitės .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>

Sukraunama horizontaliai

Naudodami vieną .col-sm-*klasių rinkinį galite sukurti pagrindinę tinklelio sistemą, kuri pradedama sukrauti ir tampa horizontali mažame lūžio taške ( 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>

Sumaišykite ir suderinkite

Nenorite, kad jūsų stulpeliai būtų tiesiog sukrauti kai kuriose tinklelio pakopose? Jei reikia, kiekvienai pakopai naudokite skirtingų klasių derinį. Norėdami geriau suprasti, kaip visa tai veikia, žiūrėkite toliau pateiktą pavyzdį.

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

Lygiavimas

Norėdami vertikaliai ir horizontaliai sulygiuoti stulpelius, naudokite „flexbox“ lygiavimo priemones.

Vertikalus lygiavimas

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

Horizontalus lygiavimas

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

Jokių latakų

Latakai tarp stulpelių mūsų iš anksto nustatytose tinklelio klasėse gali būti pašalinti naudojant .no-gutters. Taip pašalinami neigiami margins iš visų tiesioginių antrinių stulpelių .rowir horizontalūs .padding

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

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

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

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

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

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

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

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

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

You may also apply this break at specific breakpoints with our responsive display utilities.

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

Reordering

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

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

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

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

Offsetting columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

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

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

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

Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

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

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

<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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters.

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

Grid tiers

Be pačių stulpelių, taip pat galite tinkinti tinklelio pakopų skaičių. Jei norėtumėte tik keturių tinklelio pakopų, atnaujinkite $grid-breakpointsir $container-max-widthsį kažką panašaus:

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

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

Atlikdami bet kokius Sass kintamųjų ar žemėlapių pakeitimus, turėsite išsaugoti pakeitimus ir sukompiliuoti iš naujo. Taip bus išvestas visiškai naujas iš anksto nustatytų tinklelio klasių rinkinys, skirtas stulpelių pločiui, poslinkiams ir tvarkai. Reaguojančios matomumo priemonės taip pat bus atnaujintos, kad būtų naudojamos tinkintos pertraukos taškai. Būtinai nustatykite tinklelio reikšmes px(ne rem, em, arba %).