Преглед

Компоненте и опције за постављање вашег Боотстрап пројекта, укључујући контејнере за омотавање, моћан систем мреже, флексибилни медијски објекат и прилагодљиве услужне класе.

Контејнери

Контејнери су најосновнији елемент распореда у Боотстрапу и потребни су када се користи наш подразумевани систем мреже . Контејнери се користе да садрже, обложе и (понекад) центрирају садржај унутар њих. Док контејнери могу бити угнежђени, већина изгледа не захтева угнежђени контејнер.

Боотстрап долази са три различита контејнера:

• .container, који поставља а max-widthна сваку тачку прекида
• .container-fluid, што је width: 100%на свим тачкама прекида
• .container-{breakpoint}, што је width: 100%до наведене тачке прекида

Табела у наставку илуструје како се сваки контејнер max-widthупоређује са оригиналом .containerи .container-fluidпреко сваке тачке прекида.

Погледајте их у акцији и упоредите их у нашем Грид примеру .

Уцело

Наша подразумевана .containerкласа је контејнер фиксне ширине који реагује, што значи да се max-widthмења на свакој тачки прекида.

<div class="container">
  <!-- Content here -->
</div>

Флуид

Користите .container-fluidза контејнер пуне ширине, који обухвата целу ширину прозора за приказ.

<div class="container-fluid">
  ...
</div>

Респонсиве

Реактивни контејнери су нови у Боотстрапу в4.4. Они вам омогућавају да наведете класу која је 100% широка док се не достигне наведена тачка прекида, након чега примењујемо max-widthс за сваку од виших тачака прекида. На пример, .container-smширина је 100% за почетак док се smне достигне тачка прекида, где ће се повећати са md, lg, и xl.

<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>

Респонсиве бреакпоинтс

Пошто је Боотстрап развијен да буде први мобилни, користимо прегршт медијских упита да креирамо разумне тачке прекида за наше изгледе и интерфејсе. Ове тачке прелома су углавном засноване на минималним ширинама оквира за приказ и омогућавају нам да увећамо елементе како се прозорчић мења.

Боотстрап првенствено користи следеће опсеге медијских упита — или тачке прекида — у нашим изворним Сасс датотекама за наш распоред, систем мреже и компоненте.

// 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) { ... }

Пошто наш изворни ЦСС пишемо у Сасс-у, сви наши медијски упити су доступни преко Сасс миксина:

// 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

Још једном, ови медијски упити су такође доступни преко Сасс миксина:

@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) { ... }

Ови медијски упити су такође доступни преко Сасс миксина:

@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) { ... }

Сасс миксин за циљање истог опсега величине екрана би био:

@include media-breakpoint-between(md, xl) { ... }

З-индекс

Неколико компоненти Боотстрап-а користи z-index, ЦСС својство које помаже у контроли распореда обезбеђивањем треће осе за распоређивање садржаја. Користимо подразумевану скалу з-индекса у Боотстрап-у која је дизајнирана да правилно слојева навигацију, описе алата и искачуће елементе, модале и још много тога.

Ове веће вредности почињу са произвољним бројем, довољно високим и специфичним да би се у идеалном случају избегао конфликт. Потребан нам је стандардни скуп ових у нашим слојевитим компонентама – описи алата, искачући огласи, навигацијске траке, падајући мении, модали – тако да можемо бити разумно доследни у понашању. Нема разлога да не користимо 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вредности 1, 2, и 3за подразумевана стања, лебдење и активна стања. Када лебди/фокусира/активно, стављамо одређени елемент у први план са вишом z-indexвредношћу да бисмо приказали њихову границу преко сродних елемената.