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

Основни оформления на мрежата, за да се запознаете с изграждането в мрежата на 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 (изключително голям). Можете да използвате почти всяка комбинация от тези класове, за да създадете по-динамични и гъвкави оформления.

Всяко ниво от класове се мащабира, което означава, че ако планирате да зададете еднакви ширини за md, lg и xl, трябва само да посочите md.

.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-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

Контейнери

Допълнителни класове, добавени в Bootstrap v4.4, позволяват контейнери, които са 100% широки до определена точка на прекъсване.

.контейнер
.контейнер-см
.container-md
.контейнер-lg
.container-xl
.контейнер-течност