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

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