Lūžio taškai

Pagrindinės sąvokos

• Lūžio taškai yra reaguojančio dizaino elementai. Naudokite juos norėdami valdyti, kada jūsų išdėstymas gali būti pritaikytas prie tam tikro peržiūros srities arba įrenginio dydžio.

• Naudokite medijos užklausas, kad sukurtumėte CSS pagal lūžio tašką. Medijos užklausos yra CSS funkcija, leidžianti sąlygiškai taikyti stilius pagal naršyklės ir operacinės sistemos parametrų rinkinį. Mes dažniausiai naudojame min-widthsavo žiniasklaidos užklausose.

• Visų pirma mobilusis, tikslas yra interaktyvus dizainas. „Bootstrap“ CSS siekia pritaikyti minimalų stilių, kad išdėstymas veiktų mažiausioje pertraukos taške, o tada stilių sluoksnius pritaikyti didesniems įrenginiams. Tai optimizuoja jūsų CSS, pailgina pateikimo laiką ir suteikia puikią patirtį jūsų lankytojams.

Galimi lūžio taškai

„Bootstrap“ apima šešis numatytuosius pertraukos taškus, kartais vadinamus tinklelio pakopomis , kad būtų galima greitai kurti. Šiuos lūžio taškus galima tinkinti, jei naudojate mūsų šaltinio Sass failus.

Kiekvienas lūžio taškas buvo pasirinktas taip, kad būtų patogu laikyti konteinerius, kurių plotis yra 12 kartotinis. Lūžio taškai taip pat atspindi įprastų įrenginių dydžių ir peržiūros srities matmenų poaibį – jie nėra konkrečiai taikomi kiekvienam naudojimo atvejui ar įrenginiui. Vietoj to, diapazonai suteikia tvirtą ir nuoseklų pagrindą, kuriuo galima remtis beveik bet kokiam įrenginiui.

Šiuos lūžio taškus galima tinkinti naudojant Sass – juos rasite Sass žemėlapyje, esančiame mūsų _variables.scssstiliaus lape.

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

Daugiau informacijos ir pavyzdžių, kaip modifikuoti Sass žemėlapius ir kintamuosius, rasite tinklelio dokumentacijos Sass skyriuje .

Žiniasklaidos užklausos

Kadangi „Bootstrap“ pirmiausia sukurta mobiliesiems, naudojame keletą medijos užklausų , kad sukurtume protingus išdėstymo ir sąsajų lūžio taškus. Šios pertraukos taškai dažniausiai yra pagrįsti minimaliu peržiūros srities pločiu ir leidžia mums padidinti elementų mastelį, kai keičiasi peržiūros sritis.

Minimalus plotis

„Bootstrap“ pirmiausia naudoja šiuos medijos užklausų diapazonus arba lūžio taškus mūsų šaltinio „Sass“ failuose išdėstymui, tinklelio sistemai ir komponentams.

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

Šie „Sass“ mišiniai verčiami mūsų sudarytoje CSS naudojant „Sass“ kintamuosiuose nurodytas reikšmes. Pavyzdžiui:

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

Maksimalus plotis

Retkarčiais naudojame medijos užklausas, kurios nukreipiamos kita kryptimi (nurodytas ekrano dydis arba mažesnis ):

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

Šie mišiniai paima tuos deklaruotus lūžio taškus, atima .02pxiš jų ir naudoja juos kaip savo max-widthvertybes. Pavyzdžiui:

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

Vienas lūžio taškas

Taip pat yra medijos užklausų ir mišinių, skirtų taikyti pagal vieną ekrano dydžių segmentą, naudojant mažiausią ir didžiausią pertraukos taškų plotį.

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

Pavyzdžiui @include media-breakpoint-only(md) { ... }, rezultatas bus:

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

Tarp lūžio taškų

Panašiai medijos užklausos gali apimti kelis pertraukos taškų plotius:

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

Dėl ko:

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