Контейнерлер
Контейнерлер берілген құрылғыда немесе көру терезесінде мазмұнды қамтитын, толтыратын және теңестіретін 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();
}