Контејнери
Контејнерите се фундаментален градежен блок на Bootstrap што ја содржи, поставува и усогласува вашата содржина во даден уред или приказ на гледање.
Како тие работат
Контејнерите се најосновниот елемент за распоред во Bootstrap и се потребни кога се користи нашиот стандарден мрежен систем . Контејнерите се користат за да ја содржат, подлогата и (понекогаш) центрирањето на содржината во нив. Додека контејнерите може да се вгнездени, за повеќето распореди не е потребен вгнезден контејнер.
Bootstrap доаѓа со три различни контејнери:
.container
, кој поставува amax-width
на секоја одзивна точка на прекин.container-fluid
, што еwidth: 100%
на сите точки на прекин.container-{breakpoint}
, што еwidth: 100%
до наведената точка на прекин
Табелата подолу илустрира како секој контејнер се max-width
споредува со оригиналот .container
и .container-fluid
низ секоја точка на прекин.
Погледнете ги во акција и споредете ги во нашиот пример на Grid .
Екстра мала <576 пиксели |
Мала ≥576 px |
Средно ≥768 px |
Големи ≥992 пиксели |
X-Large ≥1200 px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.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
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 генерира серија предефинирани класи на контејнери за да ви помогне да ги изградите распоредот што го сакате. Можете да ги приспособите овие предефинирани класи на контејнери со менување на мапата Sass (најдена во _variables.scss
) што ги напојува:
$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();
}
За повеќе информации и примери за тоа како да ги менувате нашите Sass карти и променливи, ве молиме погледнете го делот Sass од документацијата Grid .