Преглед

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

Контејнери

Контејнерите се најосновниот елемент за распоред во Bootstrap и се потребни кога се користи нашиот стандарден мрежен систем . Изберете од одговорен контејнер со фиксна ширина (што значи неговите max-widthпромени на секоја точка на прекин) или со ширина на течност (што значи дека е 100%широк цело време).

Додека контејнерите може да се вгнездени, за повеќето распореди не е потребен вгнезден контејнер.

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

Користете .container-fluidго за контејнер со целосна ширина, опфаќајќи ја целата ширина на приказот.

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

Одговорни точки на прекин

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

Bootstrap првенствено ги користи следните опсези на барања за медиуми - или точки на прекин - во нашите изворни датотеки Sass за нашиот распоред, мрежен систем и компоненти.

// Extra small devices (portrait phones, less than 576px)
// No media query 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) { ... }

Бидејќи го пишуваме нашиот изворен CSS во Sass, сите наши барања за медиуми се достапни преку Sass миксови:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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

Уште еднаш, овие медиумски прашања се достапни и преку Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Исто така, постојат барања за медиуми и мешавини за таргетирање на еден сегмент од големини на екранот користејќи ја минималната и максималната ширина на точката на прекин.

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

Овие барања за медиуми се исто така достапни преку Sass mixins:

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

Sass mixin за таргетирање на истиот опсег на големина на екранот би бил:

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

З-индекс

Неколку компоненти на Bootstrap користат z-index, својството CSS што помага да се контролира распоредот преку обезбедување на трета оска за уредување на содржината. Користиме стандардна скала на z-индекс во Bootstrap која е дизајнирана за правилно слоевитост на навигација, совети за алатки и поповер, модали и многу повеќе.

Овие повисоки вредности започнуваат со произволен број, доволно висок и специфични за идеално да се избегнат конфликти. Ни треба стандарден сет од нив низ нашите слоевити компоненти - совети за алатки, поповери, ленти за навигација, паѓачки мени, модали - за да можеме да бидеме разумно доследни во однесувањето. Нема причина да не можевме да користиме 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вредност за да ја прикаже нивната граница над елементите од браќата или сестрите.