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

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

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

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

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

.цол-4

.цол-см-4

.цол-мд-4

.цол-лг-4

.цол-кл-4

.цол-ккл-4

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

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

.цол-мд-4

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

Користећи .row-cols-*класе, можете лако креирати мрежу са једнаким колонама.

.colдете .row-cols-md-3

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

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

.цол-мд-3

.цол-мд-6

.цол-мд-3

Две колоне

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

.цол-мд-8

.цол-мд-4

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

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

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

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

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

.цол-мд-8

.цол-мд-6

.цол-мд-4

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

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

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

.цол-мд-8

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

.цол-6

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

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

.цол-6 .цол-лг-4

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

Олуци

Са .gx-*класама, хоризонтални олуци се могу подесити.

.colса .gx-4олуцима

Користите .gy-*класе за контролу вертикалних олука.

.colса .gy-4олуцима

Са .g-*класама се могу подешавати олуци у оба смера.

.colса .g-3олуцима

Контејнери

Додатне класе додате у Боотстрап в4.4 дозвољавају контејнере који су 100% широки до одређене тачке прекида. в5 додаје нову xxlтачку прекида.

.контејнер

.контејнер-см

.цонтаинер-мд

.цонтаинер-лг

.цонтаинер-кл

.цонтаинер-ккл

.контејнер-течност