Преглед

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

Контејнери

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

Bootstrap доаѓа со три различни контејнери:

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

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

Погледнете ги во акција и споредете ги во нашиот пример на Grid .

Се во едно

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

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

Течност

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

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

Одговорен

Респонзивните контејнери се нови во Bootstrap v4.4. Тие ви дозволуваат да наведете класа која е широка 100% додека не се достигне одредената точка на прекин, по што применуваме max-widths за секоја од повисоките точки на прекин. На пример, .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>

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

Бидејќи 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

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