Челтәр системасы
Унике багана системасы, биш килешү дәрәҗәсе, Sass үзгәрүчәннәре һәм миксиннары, һәм дистәләгән алдан билгеләнгән класслар ярдәмендә барлык форма һәм зурлыкларның макетларын төзү өчен безнең көчле мобиль-беренче флексбок челтәрен кулланыгыз.
Bootstrap челтәре системасы эчтәлекне урнаштыру һәм тигезләү өчен контейнерлар, рәтләр һәм баганалар сериясен куллана. Ул флексбок белән төзелгән һәм тулысынча җаваплы. Түбәндә мисал һәм челтәрнең ничек җыелганын тирәнтен карау.
Флексбокс белән яңамы яки таныш түгел? Фон, терминология, күрсәтмәләр, код сниппетлары өчен бу CSS Tricks флексбокс кулланмасын укыгыз .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Aboveгарыдагы мисал безнең алдан билгеләнгән челтәр класслары ярдәмендә кечкенә, урта, зур һәм өстәмә зур җайланмаларда өч тигез киңлектәге баганалар ясый. Бу баганалар биттә ата-аналар белән тупланган .container
.
Аны бозу, менә ничек эшли:
- Контейнерлар сайтыгызның эчтәлеген үзәкләштерергә һәм горизонталь рәвештә урнаштырырга мөмкинлек бирә. Пиксельнең киңлеге өчен
.container
яки барлык күренешләр һәм җайланма зурлыклары өчен кулланыгыз ..container-fluid
width: 100%
- Рәтләр - баганалар өчен төргечләр. Eachәр баганада
padding
алар арасындагы киңлекне контрольдә тоту өчен горизонталь (чокыр дип атала) бар. Аннары буpadding
тискәре кырлар белән рәтләргә каршы тора. Шул рәвешле, сезнең баганалардагы барлык эчтәлек сул якка визуаль рәвештә тигезләнгән. - Челтәр макетында эчтәлек баганалар эчендә урнаштырылырга тиеш, һәм баганалар гына рәт балалары булырга мөмкин.
- Флексбокс ярдәмендә челтәр баганалары
width
автоматик рәвештә тигез киңлек баганалары итеп урнашачаклар. Мисал өчен, дүрт очракның.col-sm
һәрберсе автоматик рәвештә кечкенә өзеклектән һәм өскә 25% киң булачак. Күбрәк мисаллар өчен авто-макет баганаларын карагыз . - Колонналар класслары мөмкин булган 12 рәттән кулланырга теләгән баганалар санын күрсәтәләр. Шулай итеп, өч тигез киңлектәге баганалар теләсәгез, куллана аласыз
.col-4
. - Колонналар
width
процент белән билгеләнгән, шуңа күрә алар һәрвакыт сыек һәм зур элементларына караганда зур. - Колонналар горизонталь
padding
, аерым баганалар арасында чокырлар булдыру өчен, ләкин сезmargin
рәтләрдән һәмpadding
баганалардан алып.no-gutters
куя аласыз.row
. - Челтәрне җаваплы итәр өчен, биш челтәр ноктасы бар, һәрбер җаваплы нокта өчен бер : барлык нокталар (өстәмә кечкенә), кечкенә, урта, зур һәм өстәмә зур.
- Челтәр нокталары минималь киңлектәге медиа соравларына нигезләнгән, димәк, алар бер ноктага һәм аннан өстәрәк булганнарга кагыла (мәсәлән,
.col-sm-4
кечкенә, урта, зур һәм өстәмә зур җайланмаларга кагыла, ләкин беренчеxs
өзек түгел). - Сез алдан билгеләнгән челтәр классларын (кебек
.col-4
) яки Сасс миксиннарын күбрәк семантик билгеләр өчен куллана аласыз.
Флексбокс тирәсендәге чикләүләрне һәм хаталарны белегез, кайбер HTML элементларын флекс контейнер буларак куллана алмау кебек .
Bootstrap күпчелек зурлыкларны билгеләү өчен em
s яки s кулланса, s челтәр нокталары һәм контейнер киңлеге өчен кулланыла. Чөнки күренеш киңлеге пиксельдә һәм шрифт зурлыгы белән үзгәрми .rem
px
Bootstrap челтәр системасының аспектлары уңайлы җайланма белән берничә җайланмада ничек эшләвен карагыз.
Өстәмә кечкенә <576px |
Кечкенә ≥576px |
Урта ≥768px |
Зур ≥992px |
Өстәмә зур ≥1200px |
|
---|---|---|---|---|---|
Максималь контейнер киңлеге | Беркем дә (авто) | 540px | 720px | 960px | 1140px |
Класс префиксы | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# баганалар | 12 | ||||
Гаттер киңлеге | 30px (багананың һәр ягында 15px) | ||||
Оя | Әйе | ||||
Колонкага заказ бирү | Әйе |
Ачык санлы класссыз җиңел багананы зурлау өчен брейк-ноктага багышланган багана классларын кулланыгыз .col-sm-6
.
Мисал өчен, монда ике челтәр макеты бар, алар һәрбер җайланмага һәм күренеш портына xs
кагыла xl
. Сезгә кирәк булган һәр нокта өчен берәмлектән азрак класслар өстәгез һәм һәр багана бер үк киңлектә булачак.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Тигез киңлектәге баганаларны берничә сызыкка бүлеп була, ләкин Safari флексбок хата бар иде, бу ачыктан-ачык эшләргә комачаулады flex-basis
яки border
. Иске браузер версияләре өчен эш бар, ләкин сез заманча булсагыз, алар кирәк түгел.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Флексбокс челтәр колонкалары өчен авто-макет шулай ук сез бер багананың киңлеген куя аласыз һәм кардәш баганалар аның тирәсендә автоматик рәвештә үзгәртелә ала. Сез алдан билгеләнгән челтәр классларын куллана аласыз (аста күрсәтелгәнчә), челтәр миксиннары яки киңлек киңлеге. Игътибар итегез, бүтән баганалар үзәк багананың киңлегенә карамастан үзгәрәчәк.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
col-{breakpoint}-auto
Эчтәлекнең табигый киңлегенә карап баганаларны зурлау өчен класслар кулланыгыз .
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
.w-100
Колонналарның яңа сызыкка керүен теләгән җирне кертеп, берничә рәтне үз эченә алган тигез киңлектәге баганалар булдырыгыз . .w-100
Тәнәфесләрне кайбер җаваплы дисплей ярдәме белән кушып җаваплы итегез .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Bootstrap челтәрендә катлаулы җаваплы макетлар төзү өчен алдан билгеләнгән классларның биш дәрәҗәсе бар. Колонналарның зурлыгын өстәмә кечкенә, кечкенә, урта, зур яки өстәмә зур җайланмаларда көйләгез, ләкин сез үзегез теләгәнчә.
Кечкенә җайланмалардан иң зурларына кадәр булган челтәрләр өчен .col
классларны .col-*
кулланыгыз. Сезгә аеруча зур багана кирәк булганда номерланган классны күрсәтегез; югыйсә, ябышырга ирек бирегез .col
.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Классларның бер комплектын кулланып .col-sm-*
, сез төп челтәр системасын булдыра аласыз, ул кечкенә кисешү ноктасында горизонталь булганчы тезелгән sm
.
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Сезнең колонналарның кайбер челтәр дәрәҗәләренә туплануын теләмисезме? Кирәк булганда һәр дәрәҗә өчен төрле класслар комбинациясен кулланыгыз. Барысы да ничек эшләвен яхшырак белү өчен түбәндәге мисалны карагыз.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
Колонналарны вертикаль һәм горизонталь тигезләү өчен flexbox тигезләү программаларын кулланыгыз.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Алдан билгеләнгән челтәр классларындагы баганалар арасындагы чокырларны бетереп була .no-gutters
. Бу тискәре margin
балаларны .row
һәм горизонталь padding
барлык балалар колонкаларыннан бетерә.
Менә бу стильләрне ясау өчен чыганак коды. Игътибар итегез, багана өстәмәләре беренче балалар баганаларына гына кагыла һәм атрибут селекторы аша максатчан . Бу тагын да конкрет селектор тудырса да, багана паддеры тагын да аралар ярдәмендә көйләнергә мөмкин .
Кыр читенә дизайн кирәкме? Ата- ананы ташлагыз .container
яки .container-fluid
.
Практикада, ул ничек күренә. Игътибар итегез, сез моны бүтән алдан билгеләнгән челтәр класслары белән куллануны дәвам итә аласыз (багана киңлеге, җаваплы дәрәҗәләр, чикләр һәм башкалар).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Әгәр бер рәт эчендә 12 дән артык багана урнаштырылса, өстәмә баганаларның һәр төркеме, бер берәмлек буларак, яңа сызыкка уралачак.
9 + 4 = 13> 12 булганнан, бу 4 баганалы киң див бер янәшә берәмлек буларак яңа сызыкка төрелә.
Киләсе баганалар яңа сызык буенча дәвам итә.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
Флексбоксның яңа сызыгына баганаларны сындыру кечкенә hack таләп итә: баганаларыгызны яңа сызыкка төрергә теләгән җирдә элемент width: 100%
өстәгез. Гадәттә бу берничә .row
с белән башкарыла, ләкин моның өчен һәрбер ысул да исәпләнә алмый.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Сез шулай ук бу тәнәфесне безнең җаваплы дисплей ярдәмендә махсус пунктларда куллана аласыз .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
Эчтәлекнең визуаль тәртибен.order-
контрольдә тоту өчен дәресләр кулланыгыз . Бу класслар җаваплы, шуңа күрә сез ноктаны билгели аласыз (мәсәлән, ). Барлык биш челтәр аша да ярдәм күрсәтә .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Шулай ук , ( ) кулланып, элементның үзгәрүен үзгәртә торган җаваплы .order-first
һәм .order-last
класслар бар . Бу класслар шулай ук кирәк булганда санлы класслар белән кушылырга мөмкин.order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Сез челтәр баганаларын ике юл белән каплый аласыз: безнең җаваплы .offset-
челтәр класслары һәм маржа ярдәме . Челтәр класслары баганаларга туры килә, ә кырлар офсетның киңлеге үзгәрә торган тиз урнашу өчен файдалы.
.offset-md-*
Дәресләр ярдәмендә баганаларны уңга күчерегез . Бу класслар багананың сул читен *
баганалар буенча арттыралар. Мәсәлән, дүрт багана өстендә .offset-md-4
хәрәкәт итә..col-md-4
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Responsаваплы нокталарда багананы чистартуга өстәп, сезгә офсетларны яңадан урнаштырырга кирәк булырга мөмкин. Моны челтәр мисалында карагыз .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
.mr-auto
V4-та флексбокка күчү белән, сез бер-берегездән кардәш колонкаларны мәҗбүр итү кебек маржа ярдәмен куллана аласыз .
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Эчтәлекне килешү челтәре белән оялау өчен, булган баганага яңа .row
һәм баганалар җыелмасы өстәгез . Ояланган рәтләр 12 яки аннан да азрак булган баганалар җыелмасын кертергә тиеш (барлык 12 багананы куллану таләп ителми)..col-sm-*
.col-sm-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Bootstrap чыганагы Sass файлларын кулланганда, сез Sass үзгәрүчәннәрен һәм миксиннарны куллана аласыз, гадәти, семантик һәм җаваплы бит макетларын булдыру өчен. Алдан билгеләнгән челтәр класслары шул ук үзгәрүчәннәрне һәм миксиннарны кулланалар, тиз җаваплы макетлар өчен куллануга әзер классларның тулы комплектын.
Variзгәрешләр һәм карталар баганалар санын, чокырның киңлеген, йөзә торган баганаларны башлау өчен медиа соравын билгели. Без боларны югарыда документлаштырылган челтәр классларын, шулай ук түбәндә күрсәтелгән махсус миксиннар өчен кулланабыз.
Миксиннар челтәр үзгәрүчеләре белән берлектә аерым челтәр баганалары өчен семантик CSS булдыру өчен кулланыла.
Сез үзгәрүчәннәрне үзегезнең кыйммәтләрегезгә үзгәртә аласыз, яисә миксиннарны аларның төп кыйммәтләре белән куллана аласыз. Ике багана макетын булдыру өчен, килешенгән көйләүләрне куллану мисалы.
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Безнең урнаштырылган челтәр Sass үзгәрүчәннәрен һәм карталарын кулланып, алдан билгеләнгән челтәр классларын тулысынча көйләргә мөмкин. Дәресләр санын, медиа соравының үлчәмнәрен, контейнер киңлекләрен үзгәртегез - аннары кабатлагыз.
Челтәр баганалары саны Sass үзгәрүчәннәре аша үзгәртелергә мөмкин. $grid-columns
individualәрбер багананың киңлеген (процентында) ясау өчен кулланыла, шул ук вакытта $grid-gutter-width
тигез бүленгән киңлек киңлеге padding-left
һәм padding-right
багана чокырлары өчен.
Колонналардан читтә хәрәкәтләнеп, сез челтәр дәрәҗәләрен дә көйли аласыз. Әгәр дә сез дүрт челтәр дәрәҗәсен генә телисез икән, сез моны яңартыр $grid-breakpoints
идегез $container-max-widths
:
Sass үзгәрүчәннәренә яки карталарына үзгәрешләр керткәндә, сез үзгәртүләрегезне сакларга һәм яңадан компиляцияләргә тиеш. Моны эшләү багана киңлеге, офсет һәм заказ бирү өчен алдан билгеләнгән челтәр классларының яңа җыелмасын чыгарачак. Customзенчәлекле күренешләр куллану өчен яңартылачак. Челтәр кыйммәтләрен куегыз px
(түгел rem
, em
яки %
).