Source

Akopọ

Awọn paati ati awọn aṣayan fun fifisilẹ iṣẹ akanṣe Bootstrap rẹ, pẹlu awọn apoti wiwu, eto akoj ti o lagbara, ohun elo media rọ, ati awọn kilasi ohun elo idahun.

Awọn apoti

Awọn apoti jẹ ẹya ipilẹ akọkọ julọ ni Bootstrap ati pe wọn nilo nigba lilo eto akoj aiyipada wa . Yan lati inu ohun elo ti o ni idahun, ti o wa titi (itumọ awọn max-widthiyipada rẹ ni aaye fifọ kọọkan) tabi iwọn-omi (itumọ pe o 100%gbooro ni gbogbo igba).

Lakoko ti awọn apoti le jẹ itẹ-ẹiyẹ, ọpọlọpọ awọn ipalemo ko nilo eiyan itẹ-ẹiyẹ kan.

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

Lo .container-fluidfun eiyan iwọn ni kikun, ti o yika gbogbo iwọn ti oju wiwo naa.

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

Idahun breakpoints

Niwọn igba ti Bootstrap ti ni idagbasoke lati jẹ alagbeka ni akọkọ, a lo ọwọ diẹ ti awọn ibeere media lati ṣẹda awọn aaye fifọ ni oye fun awọn ipalemo ati awọn atọkun wa. Awọn aaye fifọ wọnyi da lori awọn iwọn iwọn wiwo ti o kere julọ ati gba wa laaye lati ṣe iwọn awọn eroja bi wiwo wiwo ṣe yipada.

Bootstrap ni akọkọ nlo awọn sakani ibeere media atẹle wọnyi—tabi awọn aaye fifọ-ni awọn faili Sass orisun wa fun iṣeto wa, eto akoj, ati awọn paati.

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

Niwọn igba ti a ti kọ orisun CSS wa ni Sass, gbogbo awọn ibeere media wa wa nipasẹ awọn apopọ 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;
  }
}

Lẹẹkọọkan a lo awọn ibeere media ti o lọ si ọna miiran (iwọn iboju ti a fun tabi kere si ):

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

Ṣe akiyesi pe niwọn igba ti awọn aṣawakiri ko ṣe atilẹyin awọn ibeere ipo ipo lọwọlọwọ , a ṣiṣẹ ni ayika awọn aropin ti min-ati awọn max-asọtẹlẹ ati awọn iwoye pẹlu awọn iwọn ida (eyiti o le waye labẹ awọn ipo kan lori awọn ẹrọ dpi giga, fun apẹẹrẹ) nipa lilo awọn iye pẹlu konge giga fun awọn afiwera wọnyi .

Lẹẹkansi, awọn ibeere media wọnyi tun wa nipasẹ awọn apopọ 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;
  }
}

Awọn ibeere media tun wa ati awọn alapọpọ fun ibi-afẹde apakan kan ti awọn iwọn iboju ni lilo iwọn ti o kere ju ati iwọn fifọ aaye ti o pọju.

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

Awọn ibeere media wọnyi tun wa nipasẹ awọn mixins 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) { ... }

Bakanna, awọn ibeere media le gun ọpọ awọn iwọn fifọ ojuami:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Adapọ Sass fun ibi-afẹde iwọn iwọn iboju kanna yoo jẹ:

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

Z-itọka

Orisirisi awọn paati Bootstrap lo z-index, ohun-ini CSS ti o ṣe iranlọwọ ipalẹmọ iṣakoso nipasẹ ipese ipo kẹta lati ṣeto akoonu. A lo iwọn-itọka z-aiyipada ni Bootstrap ti o jẹ apẹrẹ lati ṣe lilọ kiri ni deede, awọn imọran irinṣẹ ati awọn agbejade, awọn awoṣe, ati diẹ sii.

Awọn iye ti o ga julọ bẹrẹ ni nọmba lainidii, giga ati ni pato to lati yago fun awọn ija. A nilo eto boṣewa ti iwọnyi kọja awọn ohun elo ti o fẹlẹfẹlẹ wa — awọn irinṣẹ irinṣẹ, popovers, navbars, dropdowns, modals — nitorinaa a le ni ibamu deede ni awọn ihuwasi. Ko si idi ti a ko le ti lo 100+ tabi 500+.

A ko ṣe iwuri fun isọdi ti awọn iye ẹni kọọkan; ti o ba yi ọkan pada, o ṣee ṣe o nilo lati yi gbogbo wọn pada.

$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;

Lati mu awọn aala agbekọja laarin awọn paati (fun apẹẹrẹ, awọn bọtini ati awọn igbewọle ni awọn ẹgbẹ titẹ sii), a lo awọn iye oni-nọmba z-indexkekere ti 1, 2, ati 3fun aiyipada, rababa, ati awọn ipinlẹ ti nṣiṣe lọwọ. Lori rababa / idojukọ / lọwọ, a mu ipin kan pato wa si iwaju pẹlu iye ti o ga z-indexjulọ lati ṣafihan aala wọn lori awọn eroja arakunrin.