Brytpunkter

Brytpunkter är anpassningsbara bredder som bestämmer hur din responsiva layout beter sig över enhets- eller visningsportstorlekar i Bootstrap.

På den här sidan

Kärnbegrepp

Brytpunkter är byggstenarna i responsiv design. Använd dem för att styra när din layout kan anpassas till en viss visningsport eller enhetsstorlek.
Använd mediafrågor för att skapa din CSS efter brytpunkt. Mediefrågor är en funktion i CSS som låter dig villkorligt tillämpa stilar baserat på en uppsättning webbläsare och operativsystemparametrar. Vi använder oftast min-widthi våra mediefrågor.
Mobilt först, responsiv design är målet. Bootstraps CSS syftar till att tillämpa ett minimum av stilar för att få en layout att fungera vid minsta brytpunkt, och sedan lägga på stilar för att justera den designen för större enheter. Detta optimerar din CSS, förbättrar renderingstiden och ger en fantastisk upplevelse för dina besökare.

Tillgängliga brytpunkter

Bootstrap innehåller sex standardbrytpunkter, ibland kallade grid tiers , för att bygga responsivt. Dessa brytpunkter kan anpassas om du använder våra Sass-källfiler.

Brytpunkt	Klass infix	Mått
X-Small	Ingen	<576 pixlar
Små	`sm`	≥576 pixlar
Medium	`md`	≥768 pixlar
Stor	`lg`	≥992 pixlar
Extra stor	`xl`	≥1200px
Extra extra stor	`xxl`	≥1400px

Varje brytpunkt valdes för att bekvämt hålla behållare vars bredder är multiplar av 12. Brytpunkter är också representativa för en delmängd av vanliga enhetsstorlekar och vyportdimensioner – de riktar sig inte specifikt mot varje användningsfall eller enhet. Istället ger serierna en stark och konsekvent grund att bygga på för nästan alla enheter.

Dessa brytpunkter är anpassningsbara via Sass – du hittar dem i en Sass-karta i vår _variables.scssstilmall.

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

För mer information och exempel på hur du ändrar våra Sass-kartor och variabler, se Sass-avsnittet i Grid-dokumentationen .

Mediafrågor

Eftersom Bootstrap är utvecklad för att vara mobil först använder vi en handfull mediefrågor för att skapa vettiga brytpunkter för våra layouter och gränssnitt. Dessa brytpunkter är mestadels baserade på minsta visningsportbredd och låter oss skala upp element när visningsporten ändras.

Min-bredd

Bootstrap använder i första hand följande mediafrågeintervall – eller brytpunkter – i våra Sass-källfiler för vår layout, rutsystem och komponenter.

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

Dessa Sass-mixins översätts i vår kompilerade CSS med de värden som deklareras i våra Sass-variabler. Till exempel:

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

Maximal bredd

Vi använder ibland mediefrågor som går åt andra hållet (den givna skärmstorleken eller mindre ):

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

Dessa mixins tar de deklarerade brytpunkterna, subtraherar .02pxfrån dem och använder dem som våra max-widthvärden. Till exempel:

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

Varför subtrahera .02px? Webbläsare stöder för närvarande inte intervallkontextfrågor , så vi kringgår begränsningarna för min-och max-prefix och visningsportar med bråkdelar (vilket kan inträffa under vissa förhållanden på enheter med hög dpi, till exempel) genom att använda värden med högre precision.

Enskild brytpunkt

Det finns också mediefrågor och mixins för att rikta in sig på ett enstaka segment av skärmstorlekar med de minsta och maximala brytpunktsbredderna.

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

Till exempel @include media-breakpoint-only(md) { ... }kommer det att resultera i:

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

Mellan brytpunkter

På liknande sätt kan mediefrågor sträcka sig över flera brytpunktsbredder:

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

Vilket resulterar i:

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