Source

Челтәр системасы

Унике багана системасы, биш килешү дәрәҗәсе, 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-fluidwidth: 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 күпчелек үлчәмнәрне билгеләү өчен ems яки s кулланса, s челтәр нокталары һәм контейнер киңлеге өчен кулланыла. Чөнки күренеш киңлеге пиксельдә һәм шрифт зурлыгы белән үзгәрми .rempx

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. Сезгә кирәк булган һәр нокта өчен теләсә нинди берәмлектән азрак класслар өстәгез һәм һәр багана бер үк киңлектә булачак.

2 дән 1

3тән 1

3н��ң 2

<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>

Тигез киңлектәге күп сызык

.w-100Колонналарның яңа сызыкка өзелүен теләгән урынны куеп, тигез киңлектәге баганалар булдырыгыз . Тәнәфесләрне .w-100кайбер җаваплы дисплей ярдәме белән кушып җаваплы итегез .

Safari флексбок хата бар иде, бу ачыктан flex-basis- ачык эшләргә комачаулады border. Иске браузер версияләре өчен эш бар, ләкин сезнең максатлы браузерлар хата версияләренә кермәсәләр, алар кирәк түгел.

кол

<div class="container">
  <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>
</div>

Бер багана киңлеген кую

Флексбокс челтәр колонкалары өчен авто-макет шулай ук сез бер багананың киңлеген куя аласыз һәм кардәш баганалар аның тирәсендә автоматик рәвештә үзгәртелә ала. Сез алдан билгеләнгән челтәр классларын куллана аласыз (аста күрсәтелгәнчә), челтәр миксиннары яки киңлек киңлеге. Игътибар итегез, бүтән баганалар үзәк багананың киңлегенә карамастан үзгәрәчәк.

3тән 1

3нең 2 (киңрәк)

3тән 1

3нең 2 (киңрәк)

<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>

Wideзгәрешле киңлек эчтәлеге

col-{breakpoint}-autoЭчтәлекнең табигый киңлегенә карап баганаларны зурлау өчен класслар кулланыгыз .

3тән 1

Wideзгәрешле киңлек эчтәлеге

3тән 1

Wideзгәрешле киңлек эчтәлеге

<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>

Onsаваплы класслар

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

Барлык өзекләр

Кечкенә җайланмалардан иң зурларына кадәр булган челтәрләр өчен .colклассларны .col-*кулланыгыз. Сезгә аеруча зур багана кирәк булганда номерланган классны күрсәтегез; югыйсә, ябышырга ирек бирегез .col.

кол

col-8

col-4

<div class="container">
  <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>
</div>

Горизонталь

Классларның бер комплектын кулланып .col-sm-*, сез төп челтәр системасын булдыра аласыз, ул тезелгәннән башлана һәм кечкенә ноктада горизонталь булып китә ( sm).

col-sm-8

col-sm-4

кол-см

<div class="container">
  <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>
</div>

Аралашу һәм туры килү

Сезнең колонналарның кайбер челтәр дәрәҗәләренә туплануын теләмисезме? Кирәк булганда һәр дәрәҗә өчен төрле класслар комбинациясен кулланыгыз. Барысы да ничек эшләвен яхшырак белү өчен түбәндәге мисалны карагыз.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Гаттерлар

Гаттерлар җаваплы рәвештә көйләнә ала, ноктага хас паддинг һәм тискәре маржа класслары. Бирелгән рәттә чокырларны үзгәртү өчен, тискәре маржа ярдәмчесен парлаштырыгыз .rowһәм с-га туры килүче паддер ярдәмендә .col. .containerЯисә ата - .container-fluidанага да көйләнергә кирәк булырга мөмкин, кирәкмәгән ташып китүдән саклану өчен, кабат паддинг ярдәмендә.

lgМенә Bootstrap челтәрен зур ( ) ноктада һәм өстәрәк көйләү мисалы . Без паддерны арттырдык, .colата - аналар белән .px-lg-5каршы тордык, аннары төргәкне көйләдек ..mx-lg-n5.row.container.px-lg-5

Махсус багана

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Рәт баганалар

.row-cols-*Сезнең эчтәлекне һәм макетны иң яхшы күрсәтүче баганалар санын тиз билгеләү өчен җаваплы классларны кулланыгыз . Нормаль .col-*класслар аерым баганаларга кагылса (мәсәлән, .col-md-4), рәт баганалары класслары ата-аналарга .rowкыска юл итеп куелган.

Төп челтәр макетларын тиз ясау яки карта макетларыгызны контрольдә тоту өчен, бу баганалар классларын кулланыгыз.

Колонна

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Колонна

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Колонна

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Колонна

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Колонна

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Сез шулай ук иярчен Sass миксинын куллана аласыз , row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Тигезләү

Колонналарны вертикаль һәм горизонталь тигезләү өчен flexbox тигезләү программаларын кулланыгыз. Internet Explorer 10-11 флекс контейнерның аста күрсәтелгәнчә булганда вертикаль тигезләнүне хупламый . min-height Төгәлрәк мәгълүмат өчен Flexbugs 33 карагыз.

Вертикаль тигезләү

Өч багананың берсе

<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. Бу тискәре margins .rowһәм горизонталь paddingбарлык балалар колонкаларыннан бетерә.

Менә бу стильләрне ясау өчен чыганак коды. Игътибар итегез, багана өстәмәләре беренче балалар баганаларына гына кагыла һәм атрибут селекторы аша максатчан . Бу тагын да конкрет селектор тудырса да, багана паддеры тагын да аралар ярдәмендә көйләнергә мөмкин .

Кыр читенә дизайн кирәкме? Ата- ананы ташлагыз .containerяки .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Практикада, ул ничек күренә. Игътибар итегез, сез моны бүтән алдан билгеләнгән челтәр класслары белән куллануны дәвам итә аласыз (багана киңлеге, җаваплы дәрәҗәләр, чикләр һәм башкалар).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Колонка төрү

Әгәр бер рәт эчендә 12 дән артык багана урнаштырылса, өстәмә баганаларның һәр төркеме, бер берәмлек буларак, яңа сызыкка уралачак.

.col-9

.col-4
9 + 4 = 13> 12 булганнан, бу 4 баганалы киң див бер янәшә берәмлек буларак яңа сызыкка төрелә.

.col-6
Киләсе баганалар яңа сызык буенча дәвам итә.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>
</div>

Колонка тәнәфесләре

Флексбоксның яңа сызыгына баганаларны сындыру кечкенә hack таләп итә: баганаларыгызны яңа сызыкка төрергә теләгән җирдә элемент width: 100%өстәгез. Гадәттә бу берничә .rowс белән башкарыла, ләкин моның өчен һәрбер ысул да исәпләнә алмый.

.col-6 .col-sm-3

<div class="container">
  <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>

Сез шулай ук бу тәнәфесне безнең җаваплы дисплей ярдәмендә махсус пунктларда куллана аласыз .

.col-6 .col-sm-4

<div class="container">
  <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>
</div>

Теркәү

Заказ дәресләре

Эчтәлекнең визуаль тәртибен.order- контрольдә тоту өчен дәресләр кулланыгыз . Бу класслар җаваплы, шуңа күрә сез ноктаны билгели аласыз (мәсәлән, ). Барлык биш челтәр аша да ярдәм күрсәтә .order.order-1.order-md-2112

Башта DOMда заказ кулланылмады

Зур тәртип белән DOMда икенче

Өченче, DOM заказы белән

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Шулай ук , ( ) кулланып, элементның үзгәрүен үзгәртә торган җаваплы .order-firstһәм .order-lastкласслар бар . Бу класслар шулай ук кирәк булганда санлы класслар белән кушылырга мөмкин.orderorder: -1order: 13order: $columns + 1.order-*

Башта DOM, соңгы заказ

Икенче урында DOM, тәртипсез

Өченче DOM, башта заказ бирде

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Колонналарны офсетлау

Сез челтәр баганаларын ике юл белән каплый аласыз: безнең җаваплы .offset-челтәр класслары һәм маржа ярдәме . Челтәр класслары баганаларга туры килә, ә кырлар офсетның киңлеге үзгәрә торган тиз урнашу өчен файдалы.

Офсет класслары

.offset-md-*Дәресләр ярдәмендә баганаларны уңга күчерегез . Бу класслар багананың сул читен *баганалар буенча арттыралар. Мәсәлән, дүрт багана өстендә .offset-md-4хәрәкәт итә..col-md-4

.col-md-4

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

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</div>

Responsаваплы нокталарда багананы чистартуга өстәп, сезгә офсетларны яңадан урнаштырырга кирәк булырга мөмкин. Моны челтәр мисалында карагыз .

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

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

<div class="container">
  <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>
</div>

Маргин коммуналь хезмәтләре

.mr-autoV4-та флексбокка күчү белән, сез бер-берегездән кардәш колонкаларны мәҗбүр итү кебек маржа ярдәмен куллана аласыз .

.col-md-4

.col-md-4 .ml-авто

.col-md-3 .ml-md-авто

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</div>

Оя ясау

Эчтәлекне килешү челтәре белән оялау өчен, булган баганага яңа .rowһәм баганалар җыелмасы өстәгез . Ояланган рәтләр 12 яки аннан да азрак булган баганалар җыелмасын кертергә тиеш (барлык 12 багананы куллану таләп ителми)..col-sm-*.col-sm-*

1 дәрәҗә: .col-sm-9

2 нче дәрәҗә: .col-8 .col-sm-6

2 дәрәҗә: .col-4 .col-sm-6

<div class="container">
  <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>
</div>

Сасс катнашмалары

Bootstrap чыганагы Sass файлларын кулланганда, сез Sass үзгәрүчәннәрен һәм миксиннарны куллана аласыз, гадәти, семантик һәм җаваплы бит макетларын булдыру өчен. Алдан билгеләнгән челтәр класслары шул ук үзгәрүчәннәрне һәм миксиннарны кулланалар, тиз җаваплы макетлар өчен куллануга әзер классларның тулы комплектын.

Variзгәрешләр

Variзгәрешлеләр һәм карталар баганалар санын, чокырның киңлеген һәм йөзә торган баганаларны башлау өчен медиа соравын билгели. Без боларны югарыда документлаштырылган челтәр классларын, шулай ук түбәндә күрсәтелгән махсус миксиннар өчен кулланабыз.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Миксинс

Миксиннар челтәр үзгәрүчеләре белән берлектә аерым челтәр баганалары өчен семантик CSS булдыру өчен кулланыла.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Мисал куллану

Сез үзгәрүчәннәрне үзегезнең кыйммәтләрегезгә үзгәртә аласыз, яисә миксиннарны аларның төп кыйммәтләре белән куллана аласыз. Ике багана макетын булдыру өчен, килешенгән көйләүләрне куллану мисалы.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Төп эчтәлек

Икенчел эчтәлек

<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һәрбер багананың киңлеген (процентында) булдыру өчен кулланыла .$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Челтәр яруслары

Колонналардан читтә хәрәкәтләнеп, сез челтәр дәрәҗәләрен дә көйли аласыз. Әгәр дә сез дүрт челтәр дәрәҗәсен генә телисез икән, сез моны яңартыр $grid-breakpointsидегез $container-max-widths:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass үзгәрүчәннәренә яки карталарына үзгәрешләр керткәндә, сез үзгәртүләрегезне сакларга һәм яңадан компиляцияләргә тиеш. Моны эшләү багана киңлеге, офсет һәм заказ бирү өчен алдан билгеләнгән челтәр классларының яңа җыелмасын чыгарачак. Customзенчәлекле күренешләр куллану өчен яңартылачак. Челтәр кыйммәтләрен куегыз px(түгел rem, emяки %).