Brotpunktar

Brotpunktar eru sérhannaðar breiddir sem ákvarða hvernig móttækilegt útlit þitt hegðar sér í tækja- eða útsýnisstærðum í Bootstrap.

Á þessari síðu

Kjarnahugtök

Brotpunktar eru byggingareiningar móttækilegrar hönnunar. Notaðu þau til að stjórna því hvenær hægt er að aðlaga útlitið þitt við ákveðna útsýnisgátt eða tækjastærð.
Notaðu fjölmiðlafyrirspurnir til að smíða CSS þinn eftir brotpunkti. Fjölmiðlafyrirspurnir eru eiginleiki CSS sem gerir þér kleift að beita stílum með skilyrðum á grundvelli setts af vafra- og stýrikerfisbreytum. Við notum oftast min-widthí fjölmiðlafyrirspurnum okkar.
Farsíma fyrst, móttækileg hönnun er markmiðið. CSS Bootstrap miðar að því að beita algjöru lágmarki stíla til að láta skipulag virka á minnsta brotpunkti, og síðan setja lög á stíla til að laga þá hönnun fyrir stærri tæki. Þetta fínstillir CSS þinn, bætir birtingartíma og veitir gestum þínum frábæra upplifun.

Tiltækir brotapunktar

Bootstrap inniheldur sex sjálfgefna brotpunkta, stundum nefndir grid tiers , til að byggja upp á móttækilegan hátt. Hægt er að sérsníða þessa viðmiðunarpunkta ef þú ert að nota uppruna Sass skrárnar okkar.

Brotpunktur	Stéttarorð	Mál
Extra lítill	Enginn	<576px
Lítil	`sm`	≥576px
Miðlungs	`md`	≥768px
Stórt	`lg`	≥992px
Auka stór	`xl`	≥1200px
Extra extra stór	`xxl`	≥1400px

Hver brotpunktur var valinn til að halda ílátum með breidd margfeldi af 12 á þægilegan hátt. Brotpunktar eru einnig dæmigerð fyrir undirmengi algengra tækjastærða og útsýnisvæða – þeir miða ekki sérstaklega við hvert notkunartilvik eða tæki. Þess í stað veita sviðin sterkan og stöðugan grunn til að byggja á fyrir næstum hvaða tæki sem er.

Þessa brotpunkta er hægt að sérsníða í gegnum Sass—þú finnur þá á Sass korti í _variables.scssstílblaðinu okkar.

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

Fyrir frekari upplýsingar og dæmi um hvernig á að breyta Sass kortum okkar og breytum, vinsamlegast skoðaðu Sass hlutann í Grid skjölunum .

Fyrirspurnir fjölmiðla

Þar sem Bootstrap er þróað til að vera hreyfanlegur fyrst, notum við handfylli af miðlunarfyrirspurnum til að búa til skynsamlega brotpunkta fyrir útlit okkar og viðmót. Þessir brotpunktar eru að mestu byggðir á lágmarksbreiddum útsýnisgáttar og gera okkur kleift að stækka þætti eftir því sem útsýnisgáttin breytist.

Lágm. breidd

Bootstrap notar fyrst og fremst eftirfarandi margmiðlunarfyrirspurnasvið - eða brotpunkta - í uppruna Sass skrám okkar fyrir útlitið okkar, netkerfi og íhluti.

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

Þessar Sass blöndur þýða í samansettum CSS okkar með því að nota gildin sem lýst er upp í Sass breytunum okkar. Til dæmis:

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

Hámarksbreidd

Við notum stundum fjölmiðlafyrirspurnir sem fara í hina áttina (uppgefin skjástærð eða minni ):

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

Þessar blöndur taka þessi yfirlýstu brotpunkta, draga .02pxfrá þeim og nota þau sem max-widthgildi okkar. Til dæmis:

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

Af hverju að draga .02px frá? Vafrar styðja ekki eins og er sviðssamhengisfyrirspurnir , þannig að við vinnum í kringum takmarkanir min-og max-forskeyti og útsýnisglugga með brotabreiddum (sem getur átt sér stað við ákveðnar aðstæður á tækjum með háum dpi, til dæmis) með því að nota gildi með meiri nákvæmni.

Einn brotpunktur

Það eru líka fjölmiðlafyrirspurnir og blöndun til að miða á einn hluta skjástærða með því að nota lágmarks- og hámarksbrotsbreidd.

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

Til dæmis @include media-breakpoint-only(md) { ... }mun það leiða til:

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

Á milli brota

Á sama hátt geta fjölmiðlafyrirspurnir spannað margar brotpunktsbreiddir:

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

Sem leiðir af sér:

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