Source

Преглед

Компоненти и опции за поставување на вашиот 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 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) { ... }

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

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

Имајте предвид дека со оглед на тоа што прелистувачите во моментов не поддржуваат прашања за контекст на опсегот , работиме околу ограничувањата min-и max-префиксите и портите за поглед со фракциони ширини (што може да се појават под одредени услови на уреди со висока dpi, на пример) со користење на вредности со поголема прецизност за овие споредби .

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

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

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