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

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

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

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

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

.col-4

.кол-см-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

Алтернатива на три еднакви колони

Со користење на .row-cols-*класите, можете лесно да креирате мрежа со еднакви колони.

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

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

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

.col-md-3

.col-md-6

.col-md-3

Две колони

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

.col-md-8

.col-md-4

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

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

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

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

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

.col-md-8

.col-md-6

.col-md-4

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

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

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Олуци

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

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

Користете ги .gy-*часовите за да ги контролирате вертикалните олуци.

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

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

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

Контејнери

Дополнителните класи додадени во Bootstrap v4.4 дозволуваат контејнери кои се широки 100% до одредена точка на прекин. v5 додава нова точка на xxlпрекин.

.контејнер

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

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

.контејнер-lg

.контејнер-xl

.контејнер-xxl

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