Обзор

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

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

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

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

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

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

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

Баары бир

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

<div class="container">
  <!-- Content here -->
</div>

Суюктук

.container-fluidКөрүү терезесинин бүт кеңдигин камтыган толук кеңдиктеги контейнер үчүн колдонуңуз .

<div class="container-fluid">
  ...
</div>

Жооптуу

Жооптуу контейнерлер Bootstrap v4.4 жаңы. Алар көрсөтүлгөн үзүү чекитине жеткенге чейин 100% кең классты көрсөтүүгө мүмкүндүк берет, андан кийин биз max-widthар бир жогорку чекит үчүн s колдонобуз. Мисалы, үзүү чекитине жеткенге .container-smчейин баштоо үчүн 100% кенен болуп , ал , , жана менен чоңойот .smmdlgxl

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

Жооптуу токтотуу чекиттери

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

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

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Биз CSS булагыбызды Sassда жазгандыктан, биздин бардык медиа сурамдарыбыз Sass аралашмалары аркылуу жеткиликтүү:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Биз кээде башка багытта (берилген экран өлчөмү же андан кичирээк ) медиа сурамдарды колдонобуз:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Дагы бир жолу, бул медиа сурамдары Sass аралашмасы аркылуу да жеткиликтүү:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Бул медиа сурамдары Sass аралашмасы аркылуу да жеткиликтүү:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Ошо сыяктуу эле, медиа сурамдары бир нече үзүү чекитинин туурасын камтышы мүмкүн:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Ошол эле экран өлчөмү диапазонуна багытталган Sass аралашмасы:

@include media-breakpoint-between(md, xl) { ... }

Z-индекс

Бир нече Bootstrap компоненттери z-indexмазмунду иретке келтирүү үчүн үчүнчү огу менен макетти башкарууга жардам берген CSS касиетин колдонушат. Биз Bootstrap'те демейки z-индекс шкаласын колдонобуз, ал навигацияны, инструменттерди жана поповерлерди, модальдарды жана башкаларды туура катмарлоо үчүн иштелип чыккан.

Бул жогорку баалуулуктар ыктыярдуу сандан башталат, жогорку жана конфликттерден качуу үчүн жетиштүү. Биз жүрүм-турумубузда акылга сыярлык ырааттуу болушубуз үчүн, биздин катмарлуу компоненттерибиз боюнча стандарттуу топтому керек - инструментарийлер, поповерлер, навигациялар, ачылуучу тизмелер, модалдар. 100+ же + колдонбогонубузга эч кандай себеп жок 500.

Биз бул жеке баалуулуктарды ыңгайлаштырууга үндөбөйбүз; бирөөсүн өзгөртсөңүз, алардын баарын өзгөртүүгө туура келет.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Компоненттердин ичиндеги кабатталган чек араларды иштетүү үчүн (мисалы, киргизүү топторундагы баскычтар жана киргизүүлөр) биз , дын төмөнкү бир орундуу z-indexмаанилерин жана демейки 1, курсорду жана активдүү абалдарды колдонобуз. Hover/focus/active режиминде биз белгилүү бир элементти бир тууган элементтердин үстүнөн чектерин көрсөтүү үчүн жогорураак мааниге алып чыгабыз.23z-index