Тор системасы

Он эки тилке тутумунун, беш демейки жооп берүүчү деңгээлдин, Sass өзгөрмөлөрүнүн жана аралашмаларынын жана ондогон алдын ала аныкталган класстардын аркасында бардык формадагы жана өлчөмдөрдөгү макеттерди түзүү үчүн биздин күчтүү мобилдик биринчи флексбокс торубузду колдонуңуз.

Бул кантип иштейт

Bootstrap тор системасы мазмунду жайгаштыруу жана тегиздөө үчүн бир катар контейнерлерди, саптарды жана мамычаларды колдонот. Ал flexbox менен курулган жана толугу менен жооп берет. Төмөндө мисал жана тордун кантип чогулуп жатканына терең көз караш берилген.

Flexbox менен жаңыдан таанышсызбы? Фон, терминология, көрсөтмөлөр жана код үзүндүлөрү үчүн бул CSS Tricks flexbox колдонмосун окуңуз .

Үч тилкенин бири

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

Жогорудагы мисал биздин алдын ала аныкталган тор класстарыбызды колдонуу менен чакан, орто, чоң жана кошумча чоң түзмөктөрдө бирдей кеңдиктеги үч мамычаны түзөт. Бул тилкелер ата-эне менен барактын ортосуна жайгаштырылат .container.

Аны майдалап, бул жерде ал кантип иштейт:

Контейнерлер сиздин сайттын мазмунун ортого жана туурасынан толтуруу үчүн каражатты камсыз кылат. .containerЖооптуу пикселдик туурасы .container-fluidүчүн же width: 100%бардык көрүү портуна жана түзмөктүн өлчөмдөрүнө колдонуңуз .
Катарлар мамычалар үчүн орогучтар. Ар бир мамычанын paddingортосундагы мейкиндикти көзөмөлдөө үчүн горизонталдуу (таза деп аталат) бар. Андан paddingкийин терс четтери бар саптарга каршы аракеттенет. Ошентип, тилкелериңиздеги бардык мазмун визуалдык түрдө сол тарапка тегизделген.
Тор макетинде мазмун мамычалардын ичине жайгаштырылышы керек жана тилкелер гана саптардын дароо балдары болушу мүмкүн.
Flexboxтун аркасында, такталбаган тор мамычалар widthавтоматтык түрдө бирдей кеңдиктеги мамычалар катары жайгаштырылат. Мисалы, төрт инстанциянын .col-smар бири автоматтык түрдө кичинекей үзүү чекитинен 25% жана андан жогору болот. Көбүрөөк мисалдар үчүн авто-макетинг мамычалары бөлүмүн караңыз .
Мамыча класстары ар бир сапта мүмкүн болгон 12 тилкеден колдонгуңуз келген тилкелердин санын көрсөтөт. Ошентип, эгер сиз туурасы бирдей болгон үч мамычаны кааласаңыз, колдонсоңуз болот .col-4.
Мамычалар widthпайыздар менен белгиленет, ошондуктан алар ар дайым суюк жана негизги элементине салыштырмалуу өлчөмдө болот.
Мамычалар горизонталдуу paddingболуп, айрым мамычалардын ортосунда арыктарды түзүшөт, бирок сиз саптардан marginжана paddingмамычалардан ..no-gutters.row
Торду жооп бергидей кылуу үчүн, ар бир жооп берүүчү үзүү чекити үчүн бирден болгон беш торчо үзгүлтүккө учурашы бар : бардык үзүү чекиттери (кошумча кичинекей), кичине, орто, чоң жана өтө чоң.
Тор үзгүлтүккө учуроо чекиттери минималдуу кеңдиктеги медиа суроо-талаптарга негизделет, башкача айтканда, алар ошол бир жана андан жогору тургандардын бардыгына тиешелүү (мисалы, .col-sm-4чакан, орто, чоң жана ашыкча чоң түзмөктөргө тиешелүү, бирок биринчи xsүзгүлтүккө учурабайт).
Семантикалык белгилөө үчүн алдын ала аныкталган тор класстарын (мисалы .col-4) же Sass аралашмасын колдонсоңуз болот.

Кээ бир HTML элементтерин ийкемдүү контейнерлер катары колдонуу мүмкүн эместиги сыяктуу flexbox айланасындагы чектөөлөр менен мүчүлүштүктөрдөн кабардар болуңуз .

Тор параметрлери

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)
Nestable	Ооба
Мамычаларды иреттөө	Ооба

Автоматтык түрдө жайгаштырылган тилкелер

сыяктуу ачык номерленген класссыз мамычаларды оңой өлчөө үчүн үзгүлтүккө жараша тилке класстарын колдонуңуз .col-sm-6.

Бара-бара

Мисалы, бул жерде эки тор макети бар, алар ар бир түзмөккө жана көрүү портуна чейин xsколдонулат xl. Сизге керек болгон ар бир үзүү чекити үчүн бирдиксиз класстардын каалаган санын кошуңуз жана ар бир мамычанын кеңдиги бирдей болот.

1 ичинен 2

2 ичинен 2

3 ичинен 1

2 ичинен 3

3 ичинен 3

<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 flexbox катасы анын ачык 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>

Бир мамычанын туурасын коюу

Flexbox тор мамычаларынын автоматтык жайгашуусу бир мамычанын туурасын коюп, анын айланасында бир тууган мамычалардын өлчөмүн автоматтык түрдө өзгөртүүгө болот дегенди билдирет. Сиз алдын ала аныкталган тор класстарын (төмөндө көрсөтүлгөндөй), тор аралашмаларын же сызык туурасын колдонсоңуз болот. Башка мамычалар борбордук мамычанын туурасына карабастан өлчөмүн өзгөртөөрүн эске алыңыз.

3 ичинен 1

2 ичинен 3 (кеңирээк)

3 ичинен 3

3 ичинен 1

2 ичинен 3 (кеңирээк)

3 ичинен 3

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

3 ичинен 1

Өзгөрмө кеңдик мазмуну

3 ичинен 3

3 ичинен 1

Өзгөрмө кеңдик мазмуну

3 ичинен 3

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

Жооптуу класстар

Bootstrap торчосу татаал жооп берүүчү макеттерди куруу үчүн алдын ала аныкталган класстардын беш деңгээлин камтыйт. Мамычаларыңыздын өлчөмүн сиз ылайыктуу деп эсептесеңиз дагы, өтө кичине, кичине, орто, чоң же өтө чоң түзмөктөрдө ыңгайлаштырыңыз.

Бардык үзүү чекиттери

Түзмөктөрдүн эң кичинесинен эң чоңуна чейин бирдей болгон торлор үчүн .colжана .col-*класстарын колдонуңуз. Өзгөчө өлчөмдөгү тилке керек болгондо номерленген классты көрсөтүңүз; антпесе, жабышуудан тартынбаңыз .col.

кол

кол-8

кол-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>

Арыктар

Аңгычаларды үзгүлтүккө учуратуу үчүн атайын толтуруу жана терс маржа пайдалуу класстары менен жөнгө салууга болот. Берилген катардагы арыктарды өзгөртүү үчүн, терс маржа утилитасын жана s .rowбоюнча дал келген толтуруучу утилиталарды жупташтырыңыз . .colКайрадан дал келген толтуруучу утилитаны колдонуп, керексиз толуп кетпеш үчүн .containerже .container-fluidата-энени да тууралоо керек болушу мүмкүн.

Бул жерде Bootstrap торчосун чоң ( lg) үзүү чекитинде жана андан жогору ыңгайлаштыруунун мисалы келтирилген. Биз менен .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 #3 караңыз.

Вертикалдуу тегиздөө

Үч тилкенин бири

<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 тилкелүү кенен div жаңы сапка бир туташ бирдик катары оролот.

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

Мамычалар үзүлөт

Flexbox'то мамычаларды жаңы сапка бузуу кичинекей бузукулукту талап кылат: тилкелериңизди жаңы сапка орогуңуз келген жерге элемент кошуңуз width: 100%. Адатта, бул бир нече .rowс менен ишке ашат, бирок ар бир ишке ашыруу ыкмасы муну эсепке ала албайт.

.кол-6 .кол-см-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>

Сиз ошондой эле бул тыныгууну биздин жооп берүүчү дисплей утилиталары менен белгилүү бир үзгүлтүккө учуратуу чекиттеринде колдонсоңуз болот .

.кол-6 .кол-см-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 боюнча үчүнчү, 1 буйругу менен

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

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

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

Маржа утилиталары

V4'те flexbox'ка өтүү менен, .mr-autoбир тууган мамычаларды бири-биринен алыстатуу үчүн маржа утилиталарын колдоно аласыз.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

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

Sass аралашмасы

Bootstrap булагы Sass файлдарын колдонууда, сизде Sass өзгөрмөлөрүн жана аралашмаларын колдонууга ылайыктуу, семантикалык жана жооп берүүчү бет макеттерин түзүү мүмкүнчүлүгү бар. Биздин алдын ала аныкталган тор класстарыбыз ушул эле өзгөрмөлөрдү жана аралашмаларды колдонуп, тез жооп берүүчү макеттер үчүн колдонууга даяр класстардын бүтүндөй топтомун камсыздайт.

Өзгөрмөлөр

Өзгөрмөлөр жана карталар мамычалардын санын, каналдын туурасын жана калкып жүрүүчү мамычаларды баштоо үчүн медиа суроо чекитин аныктайт. Биз аларды жогоруда документтештирилген алдын ала аныкталган тор класстарын, ошондой эле төмөндө келтирилген ыңгайлаштырылган аралашмалар үчүн колдонобуз.

$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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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 өзгөрмөлөрүнө же карталарына кандайдыр бир өзгөртүүлөрдү киргизгенде, өзгөртүүлөрүңүздү сактап, кайра түзүшүңүз керек болот. Мындай кылуу мамычанын туурасы, жылыштары жана иреттөө үчүн алдын ала аныкталган тор класстарынын жаңы топтомун чыгарат. Жооптуу көрүнүү кызматтары да ыңгайлаштырылган токтотуу чекиттерин колдонуу үчүн жаңыртылат. Тор маанилерин px( rem, em, же эмес %) орнотуңуз.