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 . Ujoj kutimas enhavi, kuseneton kaj (foje) centri la enhavon ene de ili. Dum ujoj povas esti nestitaj, plej multaj aranĝoj ne postulas nestitan ujon.

Bootstrap venas kun tri malsamaj ujoj:

• .container, kiu fiksas a max-widthĉe ĉiu respondema rompopunkto
• .container-fluid, kiu estas width: 100%ĉe ĉiuj rompopunktoj
• .container-{breakpoint}, kiu estas width: 100%ĝis la specifita rompopunkto

La malsupra tabelo ilustras kiel ĉiu ujo max-widthkomparas al la originalo .containerkaj .container-fluidtrans ĉiu rompopunkto.

Vidu ilin en ago kaj komparu ilin en nia Ekzemplo de Krado .

Ĉio-en-unu

Nia defaŭlta .containerklaso estas respondema, fikslarĝa ujo, kio signifas ĝiajn max-widthŝanĝojn ĉe ĉiu rompopunkto.

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

Fluido

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

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

Respondema

Respondema ujoj estas novaj en Bootstrap v4.4. Ili permesas vin specifi klason kiu estas 100% larĝa ĝis la specifita rompopunkto estas atingita, post kio ni aplikas max-widths por ĉiu el la pli altaj rompopunktoj. Ekzemple, .container-smestas 100% larĝa por komenci ĝis la smrompopunkto estas atingita, kie ĝi skalos supren per md, lg, kaj 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>

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

Denove, ĉi tiuj amaskomunikilaj 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.