Шолу

Орау контейнерлерін, қуатты тор жүйесін, икемді медиа нысанын және жауап беретін утилита сыныптарын қоса, 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% кең болады , smмұнда ол , және арқылы үлкейеді .mdlgxl

<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мәндерді қолданамыз. Меңзерді жылжыту/фокус/белсенді параметрінде біз олардың шекарасын сіңісті элементтердің үстінен көрсету үшін жоғары мәнмен белгілі бір элементті бірінші орынға шығарамыз.123z-index