Тор системасы
Он эки тилке тутумунун, беш демейки жооп берүүчү деңгээлдин, 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 көпчүлүк өлчөмдөрдү аныктоо үчүн 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) | ||||
Nestable | Ооба | ||||
Мамычаларды иреттөө | Ооба |
Автоматтык түрдө жайгаштырылган тилкелер
сыяктуу ачык номерленген класссыз мамычаларды оңой өлчөө үчүн үзгүлтүккө жараша тилке класстарын колдонуңуз .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>
Бирдей туурасы көп сызык
.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 тор мамычаларынын автоматтык жайгашуусу бир мамычанын туурасын коюп, анын айланасында бир тууган мамычалардын өлчөмүн автоматтык түрдө өзгөртүүгө болот дегенди билдирет. Сиз алдын ала аныкталган тор класстарын (төмөндө көрсөтүлгөндөй), тор аралашмаларын же сызык туурасын колдонсоңуз болот. Башка мамычалар борбордук мамычанын туурасына карабастан өлчөмүн өзгөртөөрүн эске алыңыз.
<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>
Арыктар
Аңгычаларды үзгүлтүккө учуратуу үчүн атайын толтуруу жана терс маржа пайдалуу класстары менен жөнгө салууга болот. Берилген катардагы арыктарды өзгөртүү үчүн, терс маржа утилитасын жана 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
. Бул бардык дароо балдар тилкелериндеги терс margin
s .row
жана горизонталдууларды жок кылат.padding
Бул стилдерди түзүү үчүн баштапкы код. Мамычаны жокко чыгаруунун масштабы биринчи балдар мамычаларына гана камтылганын жана атрибут тандагыч аркылуу багытталганын эске алыңыз . Бул конкреттүү селекторду жаратса да, тилкени толтурууну дагы эле аралыктык утилиталар менен ыңгайлаштырса болот .
Чектен четине дизайн керекпи? Ата-энени таштап .container
же .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Иш жүзүндө, бул кандай көрүнөт. Муну башка бардык алдын ала аныкталган тор класстары (анын ичинде мамычалардын тууралары, жооп берүүчү деңгээлдер, иреттөөлөр жана башкалар) менен колдоно берсеңиз болот.
<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ден ашык мамычалар жайгаштырылса, кошумча мамычалардын ар бир тобу бир бирдик катары жаңы сапка оролот.
9 + 4 = 13 > 12 болгондуктан, бул 4 тилкелүү кенен div жаңы сапка бир туташ бирдик катары оролот.
Кийинки тилкелер жаны сап боюнча уланат.
<div class="container">
<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>
</div>
Мамычалар үзүлөт
Flexbox'то мамычаларды жаңы сапка бузуу кичинекей бузукулукту талап кылат: тилкелериңизди жаңы сапка орогуңуз келген жерге элемент кошуңуз width: 100%
. Адатта, бул бир нече .row
с менен ишке ашат, бирок ар бир ишке ашыруу ыкмасы муну эсепке ала албайт.
<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>
Сиз ошондой эле бул тыныгууну биздин жооп берүүчү дисплей утилиталары менен белгилүү бир үзгүлтүккө учуратуу чекиттеринде колдонсоңуз болот .
<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-2
1
12
<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
order
order: -1
order: 13
order: $columns + 1
.order-*
<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
<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>
Жооптуу үзгүлтүккө учураган тилкелерди тазалоодон тышкары, сиз офсеттерди баштапкы абалга келтиришиңиз керек болушу мүмкүн. Муну сетка мисалында аракетте караңыз .
<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
бир тууган мамычаларды бири-биринен алыстатуу үчүн маржа утилиталарын колдоно аласыз.
<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-*
<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
, же эмес %
) орнотуңуз.