Контејнери
Контејнери су основни градивни блок Боотстрапа који садрже, додају и поравнавају ваш садржај унутар датог уређаја или оквира за приказ.
Како раде
Контејнери су најосновнији елемент распореда у Боотстрапу и потребни су када се користи наш подразумевани систем мреже . Контејнери се користе да садрже, обложе и (понекад) центрирају садржај унутар њих. Док контејнери могу бити угнежђени, већина изгледа не захтева угнежђени контејнер.
Боотстрап долази са три различита контејнера:
.container
, који поставља аmax-width
на сваку тачку прекида.container-fluid
, што јеwidth: 100%
на свим тачкама прекида.container-{breakpoint}
, што јеwidth: 100%
до наведене тачке прекида
Табела у наставку илуструје како се сваки контејнер max-width
упоређује са оригиналом .container
и .container-fluid
преко сваке тачке прекида.
Погледајте их у акцији и упоредите их у нашем Грид примеру .
Изузетно мали <576пк |
Мала ≥576пк |
Средње ≥768 пиксела |
Велика ≥992 пиксела |
Кс-Ларге ≥1200пк |
КСКС-Велики ≥1400 пиксела |
|
---|---|---|---|---|---|---|
.container |
100% | 540пк | 720пк | 960пк | 1140пк | 1320пк |
.container-sm |
100% | 540пк | 720пк | 960пк | 1140пк | 1320пк |
.container-md |
100% | 100% | 720пк | 960пк | 1140пк | 1320пк |
.container-lg |
100% | 100% | 100% | 960пк | 1140пк | 1320пк |
.container-xl |
100% | 100% | 100% | 100% | 1140пк | 1320пк |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320пк |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Подразумевани контејнер
Наша подразумевана .container
класа је контејнер фиксне ширине који реагује, што значи да се max-width
мења на свакој тачки прекида.
<div class="container">
<!-- Content here -->
</div>
Респонзивни контејнери
Респонзивни контејнери вам омогућавају да наведете класу која је 100% широка док се не достигне наведена тачка прекида, након чега примењујемо max-width
с за сваку од виших тачака прекида. На пример, .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>
Сасс
Као што је горе приказано, Боотстрап генерише серију унапред дефинисаних класа контејнера како би вам помогао да изградите изгледе које желите. Можете да прилагодите ове унапред дефинисане класе контејнера тако што ћете модификовати Сасс мапу (која се налази у _variables.scss
) која их покреће:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Поред прилагођавања Сасс-а, такође можете креирати сопствене контејнере са нашим Сасс миксином.
// 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();
}
За више информација и примера о томе како да измените наше Сасс мапе и варијабле, погледајте одељак Сасс у Грид документацији .