Барраси

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

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

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