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

Мисал

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

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

Аны бөлүп көрсөк, бул жерде тор системасы кантип биригет:

• Биздин тор алты жооп берүүчү үзүү чекиттерин колдойт . Үзүлүү чекиттери медиа сурамдарына негизделет min-width, башкача айтканда, алар ошол үзүү чекитине жана анын үстүндөгүлөрдүн баарына таасир этет (мисалы, , , , , жана .col-sm-4үчүн колдонулат ). Бул ар бир үзгүлтүккө жараша контейнердин жана мамычанын өлчөмүн жана жүрүм-турумун көзөмөлдөй аласыз дегенди билдирет.smmdlgxlxxl

• Контейнерлер мазмунуңузду ортого салып, туурасынан толтуруңуз. Бардык көрүү порттору жана түзмөктөр үчүн .containerжооп берүүчү пикселдик туурасы .container-fluidүчүн же суюктук менен пикселдик кеңдиктердин айкалышы үчүн жооп берүүчү контейнерди (мисалы, ) колдонуңуз .width: 100%.container-md

• Катарлар мамычалар үчүн орогучтар. Ар бир мамычанын paddingортосундагы мейкиндикти көзөмөлдөө үчүн горизонталдуу (таза деп аталат) бар. Андан paddingкийин мамычаларыңыздагы мазмун визуалдык түрдө сол тарапка тегизделгенин камсыз кылуу үчүн терс четтери бар саптарга каршы аракеттенишет. Катарлар ошондой эле мазмунуңуздун аралыгын өзгөртүү үчүн тилке өлчөмүн жана канал класстарын бирдей колдонуу үчүн өзгөрткүч класстарды колдойт .

• Мамычалар укмуштуудай ийкемдүү. Ар бир катарда 12 шаблон мамычалары бар, алар ар кандай тилкелерди камтыган элементтердин ар кандай комбинацияларын түзүүгө мүмкүндүк берет. Мамыча класстары жайыла турган шаблон мамычаларынын санын көрсөтөт (мисалы, col-4төрт аралык). widths пайыздар менен белгиленет, андыктан сизде ар дайым бирдей өлчөм бар.

• Арыктар да жооп берет жана ыңгайлаштырылат. Гуттер класстары биздин чектерибиз жана толтуруучу аралыктарыбыз менен бирдей өлчөмдөр менен бардык үзүү чекиттеринде жеткиликтүү . Горизонталдык арыктарды .gx-*класстары менен, вертикалдык арыктарды - менен .gy-*же бардык арыктарды .g-*класстары менен алмаштырыңыз. .g-0арыктарды алып салуу үчүн да бар.

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

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

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

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

• Өтө кичинекей (xs)
• Кичинекей (см)
• Орто (md)
• Чоң (lg)
• Өтө чоң (xl)
• Өтө чоң (xxl)

Жогоруда белгиленгендей, бул үзүү чекиттеринин ар биринин өзүнүн контейнери, класстын уникалдуу префикси жана модификаторлору бар. Бул үзүү чекиттери боюнча тор кандайча өзгөрөт:

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

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

Бара-бара

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

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

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

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

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

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

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

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

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

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

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

Аралаштырыңыз жана шайкеш келтириңиз

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

<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-cols-*Мазмунуңузду жана макетиңизди эң ​​жакшы көрсөткөн тилкелердин санын тез коюу үчүн жооп берүүчү класстарды колдонуңуз . Кадимки .col-*класстар жеке тилкелерге тиешелүү болсо (мисалы, ), сап мамычалар класстары жарлык катары .col-md-4ата-энеге орнотулган . .rowСиз менен .row-cols-autoмамычаларды табигый туурасын бере аласыз.

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

<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-auto">
    <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);
  }
}

Уя салуу

Мазмунуңузду демейки тор менен уялаштыруу үчүн, учурдагы тилкеге ​​жаңы .rowжана мамычалар топтомун кошуңуз . Уюшкан саптар 12ге чейин же андан азыраак кошулган мамычалардын топтомун камтышы керек (бардык 12 жеткиликтүү мамычаны колдонуу талап кылынбайт)..col-sm-*.col-sm-*

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

Миксиндер

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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: 1.5rem !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, же эмес %) орнотуңуз.