Source

Superrigardo

Komponantoj kaj opcioj por aranĝi vian Bootstrap-projekton, inkluzive de envolvi ujojn, potencan kradsistemon, flekseblan amaskomunikilan objekton kaj respondemajn utilajn klasojn.

Ujoj

Ujoj estas la plej baza enpaĝiga elemento en Bootstrap kaj estas postulataj kiam oni uzas nian defaŭltan kradsistemon . Elektu el respondema, fiks-larĝa ujo (signifas ĝiajn max-widthŝanĝojn ĉe ĉiu rompopunkto) aŭ fluid-larĝan (signifas ke ĝi estas 100%larĝa la tutan tempon).

Dum ujoj povas esti nestitaj, plej multaj aranĝoj ne postulas nestitan ujon.

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

Uzu .container-fluidpor plenlarĝa ujo, ampleksanta la tutan larĝon de la vidfenestro.

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

Respondema rompopunktoj

Ĉar Bootstrap estas evoluigita por esti movebla unue, ni uzas manplenon da amaskomunikilaj demandoj por krei prudentajn rompopunktojn por niaj aranĝoj kaj interfacoj. Ĉi tiuj rompopunktoj estas plejparte bazitaj sur minimumaj vidfenestrolarĝoj kaj ebligas al ni pligrandigi elementojn kiam la vidfenestro ŝanĝiĝas.

Bootstrap ĉefe uzas la sekvajn amaskomunikilajn demandintervalojn - aŭ rompopunktojn - en niaj fontaj Sass-dosieroj por nia aranĝo, kradsistemo kaj komponantoj.

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

Ĉar ni skribas nian fonton CSS en Sass, ĉiuj niaj amaskomunikilaj demandoj estas haveblaj per Sass-miksaĵoj:

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

Ni foje uzas amaskomunikilajn demandojn, kiuj iras en la alia direkto (la donita ekrana grandeco aŭ pli malgranda ):

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

Notu ke ĉar retumiloj nuntempe ne subtenas gamo-kuntekstdemandojn , ni laboras ĉirkaŭ la limigoj de min-kaj max-prefiksoj kaj vidfenestroj kun frakciaj larĝoj (kiuj povas okazi sub certaj kondiĉoj ĉe alt-dpi-aparatoj, ekzemple) uzante valorojn kun pli alta precizeco por ĉi tiuj komparoj. .

Denove, ĉi tiuj amaskomunikilaraj demandoj ankaŭ haveblas per Sass-miksaĵoj:

@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;
  }
}

Ekzistas ankaŭ amaskomunikilaj demandoj kaj miksaĵoj por celi ununuran segmenton de ekrangrandecoj uzante la minimumajn kaj maksimumajn rompopunktojn.

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

Ĉi tiuj amaskomunikilaraj demandoj ankaŭ haveblas per Sass-miksaĵoj:

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

Simile, amaskomunikildemandoj povas etendi plurajn interrompajn larĝojn:

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

La Sass-miksaĵo por celi la saman ekrangrandecan gamon estus:

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

Z-indekso

Pluraj Bootstrap-komponentoj uzas z-index, la CSS-posedaĵon kiu helpas kontroli aranĝon disponigante trian akson por aranĝi enhavon. Ni uzas defaŭltan z-indeksan skalon en Bootstrap, kiu estas desegnita por ĝuste tavoligi navigadon, konsiletojn kaj popovers, modalojn kaj pli.

Ĉi tiuj pli altaj valoroj komenciĝas je arbitra nombro, sufiĉe alta kaj specifa por ideale eviti konfliktojn. Ni bezonas norman aron de ĉi tiuj tra niaj tavoligitaj komponantoj - konsiletoj, popovers, navbaroj, falmenuoj, modaloj - tiel ni povas esti prudente konsekvencaj en la kondutoj. Ne estas kialo, ke ni ne povus uzi 100+ aŭ 500+.

Ni ne instigas personigon de ĉi tiuj individuaj valoroj; se vi ŝanĝus unu, vi verŝajne bezonos ŝanĝi ilin ĉiujn.

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

Por pritrakti interkovrajn limojn ene de komponantoj (ekz., butonoj kaj enigaĵoj en eniggrupoj), ni uzas malaltajn unuciferajn z-indexvalorojn de 1, 2, kaj 3por defaŭlta, ŝvebado kaj aktivaj statoj. Sur ŝvebado/fokuso/aktiva, ni alportas apartan elementon kun pli alta z-indexvaloro por montri ilian limon super la gefrataj elementoj.