Source

Мрежова система

Използвайте нашата мощна мобилна мрежа flexbox, за да изградите оформления с всякакви форми и размери, благодарение на система от дванадесет колони, пет подразбиращи се нива, променливи и миксини на Sass и десетки предварително дефинирани класове.

Как работи

Мрежовата система на Bootstrap използва поредица от контейнери, редове и колони за оформление и подравняване на съдържанието. Създаден е с flexbox и е напълно отзивчив. По-долу е даден пример и задълбочен поглед върху това как се събира мрежата.

Нов или непознат за flexbox? Прочетете това ръководство за CSS Tricks flexbox за информация, терминология, насоки и кодови фрагменти.

Една от трите колони

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

Горният пример създава три колони с еднаква ширина на малки, средни, големи и изключително големи устройства, използвайки нашите предварително дефинирани класове на мрежата. Тези колони са центрирани в страницата с родителя .container.

Разбивайки го, ето как работи:

Контейнерите предоставят средство за центриране и хоризонтално подреждане на съдържанието на вашия сайт. Използвайте .containerза адаптивна ширина на пиксела или .container-fluidза width: 100%всички размери на прозорците и устройствата.
Редовете са обвивки за колони. Всяка колона има хоризонтален padding(наречен улей) за контролиране на пространството между тях. След paddingтова това се противодейства на редовете с отрицателни полета. По този начин цялото съдържание във вашите колони е визуално подравнено надолу вляво.
В мрежово оформление съдържанието трябва да бъде поставено в колони и само колони могат да бъдат непосредствени деца на редове.
Благодарение на flexbox колоните на мрежата без зададени widthавтоматично ще се оформят като колони с еднаква ширина. Например четири екземпляра на .col-smавтоматично ще бъдат с ширина 25% от малката точка на прекъсване и нагоре. Вижте раздела за колони с автоматично оформление за повече примери.
Класовете колони показват броя на колоните, които искате да използвате от възможните 12 на ред. Така че, ако искате три колони с еднаква ширина напречно, можете да използвате .col-4.
Колоните widthса зададени в проценти, така че те винаги са плавни и оразмерени спрямо техния родителски елемент.
Колоните са хоризонтални padding, за да създадат улуци между отделните колони, но можете да премахнете marginот редове и paddingот колони с .no-guttersна .row.
За да направите мрежата отзивчива, има пет точки на прекъсване на мрежата, по една за всяка реагираща точка на прекъсване : всички точки на прекъсване (много малки), малки, средни, големи и много големи.
Точките на прекъсване на мрежата се основават на медийни заявки с минимална ширина, което означава, че се прилагат към тази точка на прекъсване и всички тези над нея (напр. .col-sm-4важи за малки, средни, големи и много големи устройства, но не и първата точка на xsпрекъсване).
Можете да използвате предварително дефинирани класове на мрежата (като .col-4) или Sass mixins за повече семантично маркиране.

Бъдете наясно с ограниченията и грешките около flexbox , като невъзможността да използвате някои HTML елементи като flex контейнери .

Опции за решетка

Докато Bootstrap използва ems или rems за дефиниране на повечето размери, pxs се използват за точки на прекъсване на мрежата и ширини на контейнери. Това е така, защото ширината на прозореца за изглед е в пиксели и не се променя с размера на шрифта .

Вижте как аспектите на мрежовата система Bootstrap работят на множество устройства с удобна таблица.

	Изключително малък <576px	Малък ≥576px	Среден ≥768px	Голям ≥992px	Изключително голям ≥1200px
Максимална ширина на контейнера	Няма (автоматично)	540 пиксела	720 пиксела	960 пиксела	1140 пиксела
Префикс на класа	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# колони	12
Ширина на улука	30px (15px от всяка страна на колона)
Нестабилен	да
Подреждане на колони	да

Автоматично оформление на колони

Използвайте специфични за точката на прекъсване класове колони за лесно оразмеряване на колони без изричен номериран клас като .col-sm-6.

Еднаква ширина

Например, ето две оформления на мрежата, които се прилагат за всяко устройство и прозорец за изглед, от xsдо xl. Добавете произволен брой класове без единици за всяка точка на прекъсване, от която се нуждаете, и всяка колона ще бъде с еднаква ширина.

1 от 2

2 от 2

1 от 3

2 от 3

3 от 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>

Колоните с еднаква ширина могат да бъдат разделени на множество редове, но имаше грешка в Safari flexbox , която не позволяваше това да работи без изричен flex-basisили border. Има заобиколни решения за по-стари версии на браузъра, но те не би трябвало да са необходими, ако сте актуални.

Колона

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

Задаване на ширина на една колона

Автоматичното оформление за решетъчните колони на flexbox също означава, че можете да зададете ширината на една колона и да накарате братските колони автоматично да преоразмеряват около нея. Можете да използвате предварително дефинирани класове на мрежата (както е показано по-долу), миксини на мрежата или вградени ширини. Имайте предвид, че другите колони ще се преоразмеряват независимо от ширината на централната колона.

1 от 3

2 от 3 (по-широк)

3 от 3

1 от 3

2 от 3 (по-широк)

3 от 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>

Съдържание с променлива ширина

Използвайте col-{breakpoint}-autoкласове за оразмеряване на колони въз основа на естествената ширина на тяхното съдържание.

1 от 3

Съдържание с променлива ширина

3 от 3

1 от 3

Съдържание с променлива ширина

3 от 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>

Равношироки многоредови

Създайте колони с еднаква ширина, които обхващат множество редове, като вмъкнете .w-100там, където искате колоните да се разделят на нов ред. Направете прекъсванията отзивчиви, като смесите .w-100с някои помощни програми за отзивчив дисплей .

полк

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

Отзивчиви класове

Решетката на Bootstrap включва пет нива от предварително дефинирани класове за изграждане на сложни адаптивни оформления. Персонализирайте размера на вашите колони на много малки, малки, средни, големи или много големи устройства, както сметнете за добре.

Всички точки на прекъсване

За мрежи, които са еднакви от най-малкото устройство до най-голямото, използвайте класовете .colи . .col-*Посочете номериран клас, когато имате нужда от колона с определен размер; в противен случай не се колебайте да се придържате към .col.

полк

col-8

col-4

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

Подредени хоризонтално

Използвайки един набор от .col-sm-*класове, можете да създадете основна мрежова система, която започва подредена и става хоризонтална при малката точка на прекъсване ( sm).

col-sm-8

col-sm-4

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

Смесете и комбинирайте

Не искате вашите колони просто да се подреждат в няколко нива на мрежата? Използвайте комбинация от различни класове за всяко ниво, ако е необходимо. Вижте примера по-долу за по-добра представа как работи всичко.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

Подравняване

Използвайте помощни програми за подравняване на flexbox за вертикално и хоризонтално подравняване на колони.

Вертикално подравняване

Една от трите колони

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

Хоризонтално подравняване

Една от двете колони

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

Без улуци

Улуците между колоните в нашите предварително дефинирани класове на мрежата могат да бъдат премахнати с .no-gutters. Това премахва отрицателните margins от .rowи хоризонталата paddingот всички непосредствени дъщерни колони.

Ето изходния код за създаване на тези стилове. Обърнете внимание, че замените на колони са обхванати само до първите дъщерни колони и са насочени чрез селектор на атрибути . Въпреки че това генерира по-специфичен селектор, подпълването на колони все още може да бъде допълнително персонализирано с помощта на помощни програми за интервали .

Имате нужда от дизайн от край до край? Пуснете родителя .containerили .container-fluid.

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

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

На практика ето как изглежда. Имайте предвид, че можете да продължите да използвате това с всички други предварително дефинирани класове на мрежата (включително ширини на колони, адаптивни нива, пренареждане и други).

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

.col-6 .col-md-4

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

Обвиване на колони

Ако повече от 12 колони са поставени в рамките на един ред, всяка група от допълнителни колони, като една единица, ще се пренесе на нов ред.

.col-9

.col-4
Тъй като 9 + 4 = 13 > 12, този div с ширина на 4 колони се обвива на нов ред като една съседна единица.

.col-6
Следващите колони продължават на новия ред.

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

Колоните се късат

Прекъсването на колони на нов ред във flexbox изисква малък хак: добавете елемент с width: 100%където искате да обвиете колоните си на нов ред. Обикновено това се постига с множество .rows, но не всеки метод на внедряване може да отчете това.

.col-6 .col-sm-3

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

Можете също така да приложите това прекъсване в конкретни точки на прекъсване с нашите помощни програми за адаптивен дисплей .

.col-6 .col-sm-4

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

Пренареждане

Поръчайте класове

Използвайте .order-класове за контролиране на визуалния ред на вашето съдържание. Тези класове са отзивчиви, така че можете да зададете orderточката на прекъсване по (напр. .order-1.order-md-2). Включва поддръжка за 1преминаване 12през всичките пет нива на мрежата.

Първо, но неподредено

Второ, но последно

Трето, но първо

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

Има също отзивчиви .order-firstи .order-lastкласове, които променят orderна елемент чрез прилагане order: -1и order: 13( order: $columns + 1), съответно. Тези класове могат също да се смесват с номерираните .order-*класове, ако е необходимо.

Първо, но последно

Второ, но неподредено

Трето, но първо

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

Изместване на колони

Можете да компенсирате колоните на мрежата по два начина: нашите адаптивни .offset-класове на мрежата и нашите помощни програми за марж . Класовете на мрежата са оразмерени така, че да съответстват на колоните, докато полетата са по-полезни за бързи оформления, където ширината на отместването е променлива.

Офсетни класове

Преместете колони надясно с помощта на .offset-md-*класове. Тези класове увеличават лявото поле на колона по *колона. Например, .offset-md-4преминава .col-md-4през четири колони.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

В допълнение към изчистването на колони при реагиращи точки на прекъсване, може да се наложи да нулирате отместванията. Вижте това в действие в примера на мрежата .

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

Марж комунални услуги

С преминаването към flexbox във v4 можете да използвате помощни програми за маржове, като например .mr-autoда принудите колоните-роднини да се отдалечат една от друга.

.col-md-4

.col-md-4 .ml-auto

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

.col-auto .mr-auto

.col-auto

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

Гнездене

За да вложите съдържанието си в мрежата по подразбиране, добавете нова .rowи набор от .col-sm-*колони в съществуваща .col-sm-*колона. Вложените редове трябва да включват набор от колони, които се събират до 12 или по-малко (не е задължително да използвате всичките 12 налични колони).

Ниво 1: .col-sm-9

Ниво 2: .col-8 .col-sm-6

Ниво 2: .col-4 .col-sm-6

<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

Когато използвате изходните Sass файлове на Bootstrap, имате възможност да използвате Sass променливи и миксини за създаване на персонализирани, семантични и отзивчиви оформления на страници. Нашите предварително дефинирани класове на мрежата използват същите тези променливи и миксини, за да осигурят цял набор от готови за използване класове за бързо реагиращи оформления.

Променливи

Променливите и картите определят броя на колоните, ширината на улука и точката на медийна заявка, от която да започнат плаващите колони. Използваме ги, за да генерираме предварително дефинираните класове на мрежата, документирани по-горе, както и за персонализираните миксини, изброени по-долу.

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

Миксини

Миксините се използват във връзка с променливите на мрежата за генериране на семантичен CSS за отделни колони на мрежата.

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

Персонализиране на мрежата

С помощта на нашите вградени променливи и карти на мрежата Sass е възможно напълно да персонализирате предварително дефинираните класове на мрежата. Променете броя на нивата, размерите на медийните заявки и ширините на контейнера – след това компилирайте отново.

Колони и улуци

Броят на колоните на мрежата може да се променя чрез променливи на Sass. $grid-columnsсе използва за генериране на ширините (в проценти) на всяка отделна колона, докато $grid-gutter-widthзадава ширината за каналите на колоните.

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

Решетъчни нива

Преминавайки отвъд самите колони, можете също да персонализирате броя на нивата на мрежата. Ако искате само четири нива на мрежата, бихте актуализирали $grid-breakpointsи $container-max-widthsдо нещо подобно:

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

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

Когато правите промени в Sass променливите или картите, ще трябва да запазите промените си и да компилирате отново. Това ще изведе чисто нов набор от предварително дефинирани класове на мрежата за ширини на колони, отмествания и подреждане. Отзивчивите помощни програми за видимост също ще бъдат актуализирани, за да използват персонализираните точки на прекъсване. Уверете се, че сте задали стойности на мрежата в px(а не rem, emили %).