Source

Обзор

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

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

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

Контейнерлерди уя салууга болот , бирок көпчүлүк макеттер уя салынган контейнерди талап кылбайт.

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

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

<div class="container-fluid">
  ...
</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

Браузердер учурда диапазондун контексттик сурамдарын колдобогондуктан , биз бул салыштыруулар үчүн жогорку тактыктагы маанилерди колдонуу менен, бөлчөк кеңдиктеги (мисалы, жогорку dpi түзмөктөрүндө белгилүү бир шарттарда пайда болушу мүмкүн ) чектөөлөр min-менен max-префикстердин жана көрүү портторунун тегерегинде иштейбиз. .

Дагы бир жолу, бул медиа сурамдары 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