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 a nilo nigba lilo eto akoj aiyipada wa . Awọn apoti ni a lo lati ni, paadi, ati (nigbakugba) aarin akoonu laarin wọn. Lakoko ti awọn apoti le jẹ itẹ-ẹiyẹ, ọpọlọpọ awọn ipalemo ko nilo eiyan itẹ-ẹiyẹ kan.

Bootstrap wa pẹlu awọn apoti oriṣiriṣi mẹta:

• .container, eyi ti o ṣeto a max-widthni kọọkan idahun breakpoint
• .container-fluid, eyi ti o jẹ width: 100%ni gbogbo breakpoints
• .container-{breakpoint}, ti o jẹ width: 100%titi ti pàtó kan breakpoint

Awọn tabili ni isalẹ sapejuwe bi kọọkan eiyan ká max-widthafiwe si awọn atilẹba .containerati ki o .container-fluidkọja kọọkan breakpoint.

Wo wọn ni iṣe ki o ṣe afiwe wọn ninu apẹẹrẹ Grid wa .

Gbogbo-ni-ọkan

Kilasi aiyipada .containerwa jẹ idahun, eiyan iwọn ti o wa titi, afipamo awọn max-widthiyipada rẹ ni aaye fifọ kọọkan.

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

Omi

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

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

Idahun

Awọn apoti idahun jẹ tuntun ni Bootstrap v4.4. Wọn gba ọ laaye lati pato kilasi kan ti o jẹ 100% fife titi aaye isinmi ti a sọ pato ti de, lẹhin eyi a lo max-widths fun ọkọọkan awọn aaye fifọ giga. Fun apẹẹrẹ, .container-smni 100% fife lati bẹrẹ titi aaye smfifọ yoo ti de, nibiti yoo ti ṣe iwọn pẹlu md, lg, ati 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>

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 iwo wiwo ti o kere ju 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

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.