Ботстрап челтәре мисаллары

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 (телефоннар), см (планшетлар), 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-ofset-2 .col-md-6 .col-md-ofset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-ofset-2 .col-lg-6 .col-lg-ofset-0