Контейнерлер
Контейнерлер берілген құрылғыда немесе көру терезесінде мазмұнды қамтитын, толтыратын және теңестіретін Bootstrap бағдарламасының негізгі құрылыс блогы болып табылады.
Олар қалай жұмыс істейді
Контейнерлер Bootstrap ішіндегі ең негізгі орналасу элементі болып табылады және әдепкі тор жүйемізді пайдаланған кезде қажет . Контейнерлер олардың ішіндегі мазмұнды қамту, толтыру және (кейде) орталау үшін пайдаланылады. Контейнерлерді кірістіруге болатынымен, макеттердің көпшілігі кірістірілген контейнерді қажет етпейді.
Bootstrap үш түрлі контейнермен келеді:
.container, олmax-widthәрбір жауап беретін тоқтау нүктесінде орнатады.container-fluid, бұлwidth: 100%барлық тоқтау нүктелерінде.container-{breakpoint}, олwidth: 100%көрсетілген тоқтау нүктесіне дейін
Төмендегі кесте әрбір контейнердің түпнұсқамен және әрбір тоқтау нүктесі бойынша қалай max-widthсалыстырылатынын көрсетеді ..container.container-fluid
Оларды әрекетте көріңіз және біздің Grid мысалында салыстырыңыз .
| Өте кішкентай <576px |
Шағын ≥576px |
Орташа ≥768px |
Үлкен ≥992px |
X-Large ≥1200px |
XX-Үлкен ≥1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Әдепкі контейнер
Біздің әдепкі .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>
Сасс
Жоғарыда көрсетілгендей, Bootstrap сізге қалаған макеттерді құруға көмектесу үшін алдын ала анықталған контейнер сыныптарын жасайды. _variables.scssОсы алдын ала анықталған контейнер сыныптарын оларға қуат беретін Sass картасын ( -де табылған ) өзгерту арқылы теңшеуге болады:
$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();
}