Колумне
Научите како да модификујете колоне са прегршт опција за поравнање, редослед и померање захваљујући нашем систему флекбок мреже. Поред тога, погледајте како да користите класе колона за управљање ширинама елемената који нису у мрежи.
Како раде
-
Колоне се заснивају на флекбок архитектури мреже. Флекбок значи да имамо опције за промену појединачних колона и модификовање група колона на нивоу реда . Ви бирате како колоне расту, смањују се или се на други начин мењају.
-
Када правите распореде мреже, сав садржај иде у колоне. Хијерархија Боотстрап мреже иде од контејнера до реда до колоне до вашег садржаја. У ретким приликама можете комбиновати садржај и колумну, али имајте на уму да може доћи до нежељених последица.
-
Боотстрап укључује унапред дефинисане класе за креирање брзих распореда који реагују. Са шест тачака прекида и десетак колона на сваком нивоу мреже, имамо на десетине класа већ изграђених за вас да креирате жељене распореде. Ово се може онемогућити преко Сасс-а ако желите.
Поравнање
Користите услужне програме за поравнање флекбок-а за вертикално и хоризонтално поравнање колона.
Вертикално поравнање
<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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Омотавање колоне
Ако је више од 12 колона постављено у један ред, свака група додатних колона ће се, као једна јединица, премотати у нови ред.
Пошто је 9 + 4 = 13 > 12, овај див ширине 4 колоне се умотава у нови ред као једна суседна јединица.
Наредне колоне се настављају дуж новог реда.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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
с, али не може сваки метод имплементације то објаснити.
<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>
Такође можете да примените ову паузу на одређеним тачкама прекида помоћу наших услужних програма за приказ који реагује .
<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
преко 5
свих шест нивоа мреже.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Постоје и респонсиве .order-first
и .order-last
класе које мењају order
елемент применом order: -1
и order: 6
, респективно. Ове класе се такође могу мешати са нумерисаним .order-*
класама по потреби.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Оффсетинг колоне
Можете да померите колоне мреже на два начина: наше респонзивне .offset-
класе мреже и наше маргине . Класе мреже су величине тако да одговарају колонама, док су маргине корисније за брзе распореде где је ширина помака променљива.
Офсет класе
Померите колоне удесно користећи .offset-md-*
класе. Ове класе повећавају леву маргину колоне по *
колоне. На пример, .offset-md-4
креће се .col-md-4
преко четири колоне.
<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>
Поред брисања колона на одговарајућим тачкама прекида, можда ћете морати да ресетујете помаке. Погледајте ово у акцији у примеру мреже .
<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, можете користити услужне програме за маргине као што су .me-auto
да удаљите сродне колоне једну од друге.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Самосталне класе колона
Класе .col-*
се такође могу користити изван а .row
да би се елементу дала одређена ширина. Кад год се класе колона користе као недиректне потомке реда, додаци се изостављају.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Класе се могу користити заједно са услужним програмима за креирање прилагодљивих плутајућих слика. Обавезно умотајте садржај у .clearfix
омотач да бисте очистили флоат ако је текст краћи.
Параграф текста чувара места. Овде га користимо да покажемо употребу класе цлеарфик. Овде додајемо неколико бесмислених фраза да бисмо демонстрирали како колоне овде ступају у интеракцију са лебдећом сликом.
Као што видите, параграфи се грациозно омотавају око лебдеће слике. Сада замислите како би ово изгледало са неким стварним садржајем овде, а не само са овим досадним текстом чувара места који траје и траје, али заправо не преноси никакве опипљиве информације. Једноставно заузима простор и не би требало да се чита.
Па ипак, ево вас, још увек истрајавате да читате овај текст чувара места, надајући се још неким увидима, или неком скривеном ускршњем јајету садржаја. Шала, можда. Нажалост, овде нема ништа од тога.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>