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

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

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

Получете три колони с еднаква ширина, започващи от настолни компютри и мащабирани до големи настолни компютри . На мобилни устройства, таблети и по-долу колоните ще се подреждат автоматично.

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

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

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

Смесено: мобилно устройство, таблет и настолен компютър

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

Разчистване на колони

Изчистете плаващите точки в конкретни точки на прекъсване, за да предотвратите неудобно обвиване с неравномерно съдържание.

.col-xs-6 .col-sm-3
Преоразмерете прозореца за изглед или го проверете на телефона си за пример.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Нулиране на изместване, натискане и изтегляне

Нулиране на компенсации, натискания и издърпвания при конкретни точки на прекъсване.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0