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 poste 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 grandecoj kaj vidfenestroj dimensioj—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:

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

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

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

For example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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