Примери за решетка на Bootstrap

Основни оформления на мрежата, за да се запознаете с изграждането в мрежата на Bootstrap.

В тези примери .themed-grid-colкласът се добавя към колоните, за да се добави малко тематизиране. Това не е клас, който е наличен в Bootstrap по подразбиране.

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

Има пет нива на мрежовата система Bootstrap, по едно за всяка гама устройства, които поддържаме. Всяко ниво започва с минимален размер на прозореца за изглед и автоматично се прилага към по-големите устройства, освен ако не бъде заменено.

.col-4

.col-sm-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 v5 има шест нива от класове: xs (изключително малък, този клас инфикс не се използва), sm (малък), md (среден), lg (голям), xl (x-голям) и xxl (xx -голям). Можете да използвате почти всяка комбинация от тези класове, за да създадете по-динамични и гъвкави оформления.

Всяко ниво от класове се мащабира, което означава, че ако планирате да зададете еднакви ширини за md, lg, xl и xxl, трябва да посочите само 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прекъсване.

.контейнер

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

.container-md

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

.container-xl

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

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