Контейнерлер
Контейнерлер Bootstrap'тин негизги курулуш материалы болуп саналат, алар сиздин мазмунуңузду берилген түзмөктүн же көрүү терезесинин ичинде камтыган, толтурган жана тегиздөөчү.
Алар кантип иштешет
Контейнерлер Bootstrap'теги эң негизги макет элементи жана биздин демейки тор тутумубузду колдонууда талап кылынат . Контейнерлер алардын ичиндеги мазмунду камтуу, толтуруу жана (кээде) борборлоштуруу үчүн колдонулат. Контейнерлерди уя салууга болот , бирок көпчүлүк макеттер уя салынган контейнерди талап кылбайт.
Bootstrap үч түрдүү контейнер менен келет:
.container
, булmax-width
ар бир жооп берүүчү үзгүлтүккө учуратуу пунктуна орнотот.container-fluid
, булwidth: 100%
бардык үзүү чекиттеринде.container-{breakpoint}
, булwidth: 100%
көрсөтүлгөн үзүү чекитине чейин
Төмөнкү таблица ар бир контейнердин түпнускага жана ар бир үзүү чекитине кандайча max-width
салыштырарын көрсөтөт ..container
.container-fluid
Аларды иш жүзүндө көрүп, биздин Grid мисалыбызда салыштырыңыз .
Өтө кичинекей <576px |
Кичинекей ≥576px |
Орточо ≥768px |
Чоң ≥992px |
X-Large ≥1200px |
XX- Ларге ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Демейки контейнер
Биздин демейки .container
класс - бул жооп берүүчү, туурасы белгиленген контейнер, анын max-width
ар бир үзгүлтүккө учурашында өзгөрүшүн билдирет.
<div class="container">
<!-- Content here -->
</div>
Жооптуу контейнерлер
Жооптуу контейнерлер көрсөтүлгөн үзүү чекитине жеткенге чейин 100% кең классты көрсөтүүгө мүмкүндүк берет, андан кийин биз max-width
ар бир жогорку чекит үчүн s колдонобуз. Мисалы, үзүү чекитине жеткенге .container-sm
чейин баштоо үчүн 100% кенен болуп , ал , , , жана менен чоңойот .sm
md
lg
xl
xxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Суюктуктар үчүн контейнерлер
.container-fluid
Көрүү терезесинин бүт кеңдигин камтыган толук кеңдиктеги контейнер үчүн колдонуңуз .
<div class="container-fluid">
...
</div>
Sass
Жогоруда көрсөтүлгөндөй, Bootstrap сиз каалаган макеттерди түзүүгө жардам берүү үчүн алдын ала аныкталган контейнер класстарынын сериясын түзөт. Сиз бул алдын ала аныкталган контейнер класстарын кубаттаган Sass картасын өзгөртүү менен ыңгайлаштырсаңыз болот ( ичинде табылган _variables.scss
):
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass'ты ыңгайлаштыруудан тышкары, биздин Sass аралашмасы менен өзүңүздүн контейнерлериңизди да түзө аласыз.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Биздин Sass карталарыбызды жана өзгөрмөлөрүбүздү кантип өзгөртүү боюнча көбүрөөк маалымат жана мисалдар үчүн Grid документтеринин Sass бөлүмүнө кайрылыңыз .