Барраси

Унсурҳо ва имконоти тарҳрезии лоиҳаи Bootstrap-и шумо, аз ҷумла контейнерҳои бастабандӣ, системаи пурқуввати шабакавӣ, объекти чандири медиа ва синфҳои хидматрасонии ҷавобгӯ.

Контейнерҳо

Контейнерҳо унсури асосии тарҳбандии Bootstrap мебошанд ва ҳангоми истифодаи системаи пешфарзии мо талаб карда мешаванд . Контейнерҳо барои нигоҳ доштан, ҷой додан ва (баъзан) марказонидани мундариҷа дар дохили онҳо истифода мешаванд. Гарчанде ки контейнерҳоро лона кардан мумкин аст, аксари тарҳҳо як контейнери лонаро талаб намекунанд.

Bootstrap бо се контейнерҳои гуногун меояд:

• .container, ки 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-widthбарои ҳар як нуқтаи баландтар s-ро истифода мебарем. Масалан, .container-smто smрасидан ба нуқтаи кандашавӣ 100% васеъ аст, ки он бо 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 дастрасанд:

@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 дастрасанд:

@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 барои ҳадафгирии як диапазони андозаи экран чунин хоҳад буд:

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

индекси Z

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

$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арзиши баландтар ба ҷои аввал меорем, то сарҳади онҳоро дар болои унсурҳои бародар нишон диҳад.