Rompopunktoj

Kernaj konceptoj

• Rompopunktoj estas la konstrubriketoj de respondema dezajno. Uzu ilin por kontroli kiam via aranĝo povas esti adaptita ĉe aparta vidfenestro aŭ aparato grandeco.

• Uzu amaskomunikilajn demandojn por krei vian CSS per rompopunkto. Amaskomunikilaraj demandoj estas trajto de CSS, kiu permesas vin kondiĉe apliki stilojn bazitajn sur aro de retumilo kaj operaciumo-parametroj. Ni plej ofte uzas min-widthen niaj amaskomunikilaj demandoj.

• Poŝtelefono unue, respondema dezajno estas la celo. La CSS de Bootstrap celas apliki la minimumon de stiloj por ke aranĝo funkciu ĉe la plej malgranda rompopunkto, kaj tiam tavoloj sur stiloj por ĝustigi tiun dezajnon por pli grandaj aparatoj. Ĉi tio optimumigas vian CSS, plibonigas la bildigan tempon kaj provizas bonegan sperton por viaj vizitantoj.

Disponeblaj rompopunktoj

Bootstrap inkluzivas ses defaŭltajn rompopunktojn, foje nomatajn kradnivelojn , por konstrui respondeme. Ĉi tiuj rompopunktoj povas esti personecigitaj se vi uzas niajn fontajn dosierojn Sass.

Ĉiu rompopunkto estis elektita por komforte teni ujojn, kies larĝoj estas multobloj de 12. Rompopunktoj ankaŭ estas reprezentaj de subaro de oftaj aparatoj kaj dimensioj de vidpunkto—ili ne specife celas ĉiun uzon aŭ aparaton. Anstataŭe, la gamoj provizas fortan kaj konsekvencan bazon por konstrui por preskaŭ ajna aparato.

Ĉi tiuj rompopunktoj estas agordeblaj per Sass—vi trovos ilin en Sass-mapo en nia _variables.scssstilfolio.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Por pliaj informoj kaj ekzemploj pri kiel modifi niajn Sass-mapojn kaj variablojn, bonvolu raporti al la sekcio Sass de la Grid-dokumentado .

Demandoj pri amaskomunikiloj

Ĉ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.

Min-larĝo

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

// Source mixins

// 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

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

Ĉi tiuj Sass-miksaĵoj tradukiĝas en nia kompilita CSS uzante la valorojn deklaritajn en niaj Sass-variabloj. Ekzemple:

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

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Maksimuma-larĝo

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

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Ĉi tiuj miksaĵoj prenas tiujn deklaritajn rompopunktojn, subtrahas .02pxde ili kaj uzas ilin kiel niajn max-widthvalorojn. Ekzemple:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Ununura rompopunkto

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

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

Ekzemple la @include media-breakpoint-only(md) { ... }rezultos en:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Inter rompopunktoj

Simile, amaskomunikildemandoj povas etendi plurajn interrompajn larĝojn:

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

Kiu rezultigas:

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