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

Bootstrap челтәре системасы белән танышу өчен төп челтәр макетлары.

Бу мисалларда .themed-grid-colкласс кайбер темалар өстәү өчен баганаларга өстәлә. Бу Bootstrap'та килешү буенча булган класс түгел.

Биш челтәр дәрәҗәсе

Bootstrap челтәр системасына биш ярус бар, без ярдәм иткән һәрбер җайланма өчен бер. Eachәр дәрәҗә минималь күренеш күләменнән башлана һәм өстәмә рәвештә зур җайланмаларга кагыла.

.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-xxl-4
.col-xxl-4
.col-xxl-4

Өч тигез багана

Өстәлдән башлап, зур эш өстәлләренә масштаб ясап, өч тигез киңлектәге баганалар алыгыз . Кәрәзле җайланмаларда, планшетларда һәм аста баганалар автоматик рәвештә тезеләчәк.

.col-md-4
.col-md-4
.col-md-4

Өч тигез багана альтернативасы

Дәресләрне кулланып .row-cols-*, сез тигез баганалар белән челтәр булдыра аласыз.

.colбаласы .row-cols-md-3
.colбаласы .row-cols-md-3
.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-6
.col-md-4

Катнаш: мобиль һәм эш өстәле

Bootstrap v4 челтәр системасында биш дәрәҗә класс бар: xs (өстәмә кечкенә, бу класс инфикс кулланылмый), см (кечкенә), 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

Гаттерлар

Дәресләр белән .gx-*горизонталь чокырлар көйләнергә мөмкин.

.col.gx-4чокырлар белән
.col.gx-4чокырлар белән
.col.gx-4чокырлар белән
.col.gx-4чокырлар белән
.col.gx-4чокырлар белән
.col.gx-4чокырлар белән

.gy-*Вертикаль чокырларны контрольдә тоту өчен классларны кулланыгыз .

.col.gy-4чокырлар белән
.col.gy-4чокырлар белән
.col.gy-4чокырлар белән
.col.gy-4чокырлар белән
.col.gy-4чокырлар белән
.col.gy-4чокырлар белән

Класслар белән .g-*, ике юнәлештәге чокырлар көйләнергә мөмкин.

.col.g-3чокырлар белән
.col.g-3чокырлар белән
.col.g-3чокырлар белән
.col.g-3чокырлар белән
.col.g-3чокырлар белән
.col.g-3чокырлар белән

Контейнерлар

Bootstrap v4.4 өстәлгән өстәмә класслар билгеле бер ноктага кадәр 100% киң булган контейнерларга мөмкинлек бирә. v5 яңа өзек өсти xxl.

.container
контейнер-см
контейнер-мд
.container-lg
.container-xl
.container-xxl
контейнер-сыеклык