Контейнерлер

Алар кантип иштешет

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

Bootstrap үч түрдүү контейнер менен келет:

• .container, бул max-widthар бир жооп берүүчү үзгүлтүккө учуратуу пунктуна орнотот
• .container-{breakpoint}, бул width: 100%көрсөтүлгөн үзүү чекитине чейин
• .container-fluid, бул width: 100%бардык үзүү чекиттеринде

Төмөнкү таблица ар бир контейнердин түпнускага жана ар бир үзүү чекитине кандайча max-widthсалыштырарын көрсөтөт ..container.container-fluid

Аларды иш жүзүндө көрүп, биздин Grid мисалыбызда салыштырыңыз .

Демейки контейнер

Биздин демейки .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 бөлүмүнө кайрылыңыз .