Барраси

Унсурҳо ва имконоти тарҳрезии лоиҳаи 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

Якчанд ҷузъҳои Bootstrap z-indexмоликияти CSS-ро истифода мебаранд, ки ба идоракунии тарҳ тавассути таъмин кардани меҳвари сеюм барои ташкили мундариҷа кӯмак мекунанд. Мо миқёси пешфарзии z-index-ро дар 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арзиши баландтар ба ҷои аввал меорем, то сарҳади онҳоро дар болои унсурҳои бародар нишон диҳем.