Примери мреже за покретање

Основни распореди мреже који ће вас упознати са изградњом унутар Боотстрап система мреже.

У овим примерима .themed-grid-colкласа је додата колонама да би се додала нека тема. Ово није класа која је подразумевано доступна у Боотстрапу.

Пет нивоа мреже

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

.цол-4
.цол-4
.цол-4
.цол-см-4
.цол-см-4
.цол-см-4
.цол-мд-4
.цол-мд-4
.цол-мд-4
.цол-лг-4
.цол-лг-4
.цол-лг-4
.цол-кл-4
.цол-кл-4
.цол-кл-4

Три једнаке колоне

Набавите три колоне једнаке ширине почевши од десктопа и скалирајте до великих десктопа . На мобилним уређајима, таблетима и испод, колоне ће се аутоматски слагати.

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

Три неједнаке колоне

Набавите три колоне почевши од десктопа и скалирајте до великих десктопа различитих ширина. Запамтите, број колона мреже треба да износи до дванаест за један хоризонтални блок. Више од тога, колоне почињу да се слажу без обзира на област приказа.

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

Две колоне

Набавите две колоне почевши од десктопа и скалирајте до великих десктопа .

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

Пуна ширина, једна колона

За елементе пуне ширине нису потребне мрежне класе.


Две колоне са две угнежђене колоне

Према документацији, угнежђивање је лако — само ставите ред колона у постојећу колону. Ово вам даје две колоне почев од десктопа и скалирање до великих десктопа , са још две (једнаке ширине) унутар веће колоне.

На величинама мобилних уређаја, таблета и ниже, ове колоне и њихове угнежђене колоне ће се слагати.

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

Мешано: мобилни и десктоп

Мрежни систем Боотстрап в4 има пет нивоа класа: кс (екстра мали), см (мали), мд (средњи), лг (велики) и кл (екстра велики). Можете користити скоро сваку комбинацију ових класа да бисте креирали динамичније и флексибилније распореде.

Сваки ниво класа се повећава, што значи да ако планирате да поставите исте ширине за кс и см, потребно је само да наведете кс.

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

Мешано: мобилни, таблет и десктоп

.цол-12 .цол-см-6 .цол-лг-8
.цол-6 .цол-лг-4
.цол-6 .цол-см-4
.цол-6 .цол-см-4
.цол-6 .цол-см-4