Примери за решетка за подигање

Основни распореди на мрежа за да се запознаете со градењето во рамките на мрежниот систем Bootstrap.

Во овие примери .themed-grid-colкласата се додава во колоните за да се додаде некоја тематика. Ова не е класа што е стандардно достапна во Bootstrap.

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

Има пет нивоа на системот за мрежа Bootstrap, по еден за секој опсег на уреди што ги поддржуваме. Секое ниво започнува со минимална големина на приказот и автоматски се применува на поголемите уреди, освен ако не се отфрли.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

Добијте три колони со еднаква ширина почнувајќи од работната површина и скалирање до големи работни површини . На мобилни уреди, таблети и подолу, колоните автоматски ќе се редат.

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

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

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

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

Две колони

Добијте две колони почнувајќи од работната површина и скалирање до големи десктоп компјутери .

.col-md-8
.col-md-4

Целосна ширина, една колона

Не се потребни класи на мрежа за елементи со целосна ширина.


Две колони со две вгнездени колони

Според документацијата, вгнездувањето е лесно - само ставете ред од колони во постоечка колона. Ова ви дава две колони кои почнуваат од работната површина и се зголемуваат до големи работни површини , со уште две (еднакви ширини) во поголемата колона.

Во големини на мобилни уреди, таблети и надолу, овие колони и нивните вгнездени колони ќе се редат.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

Мрежниот систем Bootstrap v4 има пет нивоа на класи: xs (екстра мали), sm (мали), md (средни), lg (големи) и xl (екстра големи). Можете да користите речиси секоја комбинација од овие класи за да креирате подинамични и пофлексибилни распореди.

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4