Source

Систем мреже

Користите нашу моћну флекбок мрежу која је на првом месту за мобилне уређаје да бисте направили распореде свих облика и величина захваљујући систему од дванаест колона, пет подразумеваних нивоа одзива, Сасс променљивим и миксинама и десетинама унапред дефинисаних класа.

Како то ради

Боотстрап-ов мрежни систем користи низ контејнера, редова и колона за распоред и поравнање садржаја. Направљен је са флексбоксом и потпуно реагује. Испод је пример и детаљан поглед на то како се мрежа спаја.

Нови сте или нисте упознати са флексбоксом? Прочитајте овај Флекбок водич за ЦСС Трицкс за позадину, терминологију, смернице и исечке кода.

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

<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се онда супротставља на редовима са негативним маргинама. На овај начин, сав садржај у вашим колонама је визуелно поравнат са леве стране.
У распореду мреже, садржај мора бити смештен унутар колона и само колоне могу бити непосредно потомци редова.
Захваљујући флекбок-у, колоне мреже без наведене widthће се аутоматски поставити као колоне једнаке ширине. На пример, четири инстанце .col-smће аутоматски бити широке 25% од мале тачке прекида и више. Погледајте одељак колона са аутоматским распоредом за више примера.
Класе колона означавају број колона које желите да користите од могућих 12 по реду. Дакле, ако желите три колоне једнаке ширине, можете користити .col-4.
Колоне widthс су постављене у процентима, тако да су увек течне и величине у односу на њихов родитељски елемент.
Колоне су хоризонталне paddingза стварање олука између појединачних колона, међутим, можете уклонити marginиз редова и paddingиз колона са .no-guttersна .row.
Да би мрежа била прилагодљива, постоји пет преломних тачака мреже, по једна за сваку тачку прекида : све тачке прекида (екстра мале), мале, средње, велике и екстра велике.
Преломне тачке мреже су засноване на медијским упитима минималне ширине, што значи да се примењују на ту једну тачку прекида и све оне изнад ње (нпр. .col-sm-4примењују се на мале, средње, велике и екстра велике уређаје, али не и на прву xsтачку прекида).
Можете користити унапред дефинисане класе мреже (попут .col-4) или Сасс миксине за више семантичког означавања.

Будите свесни ограничења и грешака око флекбок-а , као што је немогућност коришћења неких ХТМЛ елемената као флек контејнера .

Опције мреже

Док Боотстрап користи emс или remс за дефинисање већине величина, pxс се користе за тачке прекида мреже и ширине контејнера. То је зато што је ширина прозора за приказ у пикселима и не мења се са величином фонта .

Погледајте како аспекти Боотстрап грид система функционишу на више уређаја помоћу практичног стола.

	Изузетно мали <576пк	Мала ≥576пк	Средње ≥768пк	Велика ≥992 пиксела	Екстра велика ≥1200 пиксела
Максимална ширина контејнера	Ништа (аутоматски)	540пк	720пк	960пк	1140пк
Префикс класе	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Број колона	12
Ширина олука	30 пиксела (15 пиксела са сваке стране колоне)
Нестабле	да
Редослед колона	да

Аутоматски распоред колона

Користите класе колона специфичне за тачку прекида за једноставно одређивање величине колона без експлицитне нумерисане класе као што је .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>

Колоне једнаке ширине могу се разбити у више редова, али постојала је грешка Сафари флекбок- а која је спречила да ово функционише без експлицитног 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>

Подешавање ширине једне колоне

Аутоматски распоред за колоне флекбок мреже такође значи да можете да подесите ширину једне колоне и да сродним колонама аутоматски промените величину око ње. Можете користити унапред дефинисане класе мреже (као што је приказано испод), мешавине мреже или ширине у линији. Имајте на уму да ће се величина осталих колона променити без обзира на ширину централне колоне.

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

Респонсиве цлассес

Боотстрап мрежа укључује пет нивоа унапред дефинисаних класа за изградњу сложених респонзивних изгледа. Прилагодите величину својих колона на изузетно малим, малим, средњим, великим или екстра великим уређајима како год вам одговара.

Све тачке прекида

За мреже које су исте од најмањег уређаја до највећег, користите класе .colи . .col-*Одредите нумерисану класу када вам је потребна колона посебне величине; у супротном, слободно се држите .col.

цол

цол-8

цол-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>

Наслагано до хоризонтале

Користећи један скуп .col-sm-*класа, можете креирати основни систем мреже који почиње наслагано и постаје хоризонталан на малој тачки прекида ( sm).

цол-см-8

цол-см-4

кол-см

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

Комбинујете и

Не желите да се ваше колоне једноставно слажу у неке слојеве мреже? Користите комбинацију различитих класа за сваки ниво по потреби. Погледајте пример испод за бољу представу о томе како све то функционише.

.цол-12 .цол-мд-8

.цол-6 .цол-мд-4

.цол-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-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>
</div>

Олуци

Олуци се могу прилагодљиво подешавати помоћу допуна специфичних за тачку прекида и класа корисности негативне маргине. Да бисте променили олуке у датом реду, упарите услужни програм негативне маргине на .rowи одговарајући помоћни програм за допуну на .colс. Можда ће морати да се подеси и родитељ .containerили .container-fluidда би се избегло нежељено преливање, користећи поново одговарајући услужни програм за допуну.

Ево примера прилагођавања Боотстрап мреже на великој ( lg) тачки прекида и изнад. Повећали смо .colпаддинг са .px-lg-5, супротставили то са .mx-lg-n5на родитељу .row, а затим смо подесили .containerомотач са .px-lg-5.

Прилагођено пуњење колона

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

Поравнање

Користите услужне програме за поравнање флекбок-а за вертикално и хоризонтално поравнање колона.

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

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

<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. Ово уклања негативне marginс из .rowи хоризонталне paddingиз свих непосредних подређених колона.

Ево изворног кода за креирање ових стилова. Имајте на уму да су замене колона ограничене на само прве подређене колоне и да су циљане преко селектора атрибута . Иако ово генерише специфичнији селектор, допуна колона се и даље може додатно прилагодити помоћу услужних програма за размак .

Треба вам дизајн од ивице до ивице? Испустите родитеља .containerили .container-fluid.

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

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

У пракси, ево како то изгледа. Имајте на уму да ово можете наставити да користите са свим другим унапред дефинисаним класама мреже (укључујући ширине колона, нивое који реагују, промене редоследа и још много тога).

.цол-12 .цол-см-6 .цол-мд-8

.цол-6 .цол-мд-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 колона постављено у један ред, свака група додатних колона ће се, као једна јединица, премотати у нови ред.

.цол-9

.цол-4
Пошто је 9 + 4 = 13 > 12, овај див ширине 4 колоне се умотава у нови ред као једна суседна јединица.

.цол-6
Наредне колоне се настављају дуж новог реда.

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

Преломи колона

Прекидање колона у нови ред у флекбок-у захтева мали хак: додајте елемент width: 100%где год желите да умотате своје колоне у нови ред. Обично се ово постиже са вишеструким .rowс, али не може сваки метод имплементације то објаснити.

.цол-6 .цол-см-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>

Такође можете да примените ову паузу на одређеним тачкама прекида помоћу наших услужних програма за приказ који реагује .

.цол-6 .цол-см-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>

Преуређивање

Наручите часове

Користите .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преко четири колоне.

.цол-мд-4

.цол-мд-4 .оффсет-мд-4

.цол-мд-3 .оффсет-мд-3

.цол-мд-6 .оффсет-мд-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>

Поред брисања колона на одговарајућим тачкама прекида, можда ћете морати да ресетујете помаке. Погледајте ово у акцији у примеру мреже .

.цол-см-5 .цол-мд-6

.цол-см-5 .оффсет-см-2 .цол-мд-6 .оффсет-мд-0

.цол-см-6 .цол-мд-5 .цол-лг-6

.цол-см-6 .цол-мд-5 .оффсет-мд-2 .цол-лг-6 .оффсет-лг-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>

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

Са преласком на флекбок у в4, можете користити услужне програме за маргине као што су .mr-autoда удаљите сродне колоне једну од друге.

.цол-мд-4

.цол-мд-4 .мл-ауто

.цол-мд-3 .мл-мд-ауто

.цол-ауто .мр-ауто

.цол-ауто

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

Нестинг

Да бисте свој садржај угнездили са подразумеваном мрежом, додајте нову .rowи скуп .col-sm-*колона унутар постојеће .col-sm-*колоне. Угнежђени редови треба да обухватају скуп колона које имају збир до 12 или мање (није обавезно да користите свих 12 доступних колона).

Ниво 1: .цол-см-9

Ниво 2: .цол-8 .цол-см-6

Ниво 2: .цол-4 .цол-см-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>

Сасс микинс

Када користите изворне Сасс датотеке Боотстрап-а, имате опцију да користите Сасс променљиве и миксине за креирање прилагођених, семантичких и прилагодљивих изгледа страница. Наше унапред дефинисане класе мреже користе ове исте варијабле и миксине да обезбеде читав пакет класа спремних за употребу за брзо реаговање распореда.

Променљиве

Променљиве и мапе одређују број колона, ширину олука и тачку упита медија у којој ће почети плутајуће колоне. Користимо их да генеришемо унапред дефинисане класе мреже које су горе документоване, као и за прилагођене миксине наведене у наставку.

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

Микинс

Миксини се користе заједно са варијаблама мреже за генерисање семантичког ЦСС-а за појединачне колоне мреже.

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

Прилагођавање мреже

Користећи наше уграђене мрежне Сасс променљиве и мапе, могуће је потпуно прилагодити унапред дефинисане класе мреже. Промените број слојева, димензије медијског упита и ширине контејнера — а затим поново компајлирајте.

Стубови и олуци

Број колона мреже може се мењати преко Сасс променљивих. $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
);

Када правите било какве промене у Сасс променљивим или мапама, мораћете да сачувате промене и поново компајлирате. На тај начин ће се добити потпуно нови скуп унапред дефинисаних класа мреже за ширине колона, помаке и редослед. Ажурирани услужни програми за видљивост ће такође бити ажурирани да користе прилагођене тачке прекида. Обавезно поставите вредности мреже у px(не rem, em, или %).