Примери на мрежа за подигање

Основни распореди на мрежа за да се запознаете со градењето во рамките на мрежниот систем 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-xs-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