Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

Breakpoints

Awọn aaye fifọ jẹ awọn iwọn isọdi ti o pinnu bi ifilelẹ idahun rẹ ṣe huwa kọja ẹrọ tabi awọn iwọn wiwo ni Bootstrap.

Lori iwe yi

Awọn agbekale mojuto

  • Awọn aaye fifọ jẹ awọn bulọọki ile ti apẹrẹ idahun. Lo wọn lati ṣakoso nigbati ifilelẹ rẹ le ṣe deede ni ibudo wiwo tabi iwọn ẹrọ kan.

  • Lo awọn ibeere media lati ṣe ayaworan CSS rẹ nipasẹ aaye fifọ. Awọn ibeere media jẹ ẹya ti CSS ti o gba ọ laaye lati lo awọn aṣa ti o da lori eto aṣawakiri ati awọn aye eto ẹrọ. A lo julọ min-widthni awọn ibeere media wa.

  • Alagbeka akọkọ, apẹrẹ idahun ni ibi-afẹde naa. Bootstrap's CSS ṣe ifọkansi lati lo o kere ju ti awọn aza lati jẹ ki iṣẹ iṣeto kan ṣiṣẹ ni aaye isinmi ti o kere julọ, ati lẹhinna fẹlẹfẹlẹ lori awọn aza lati ṣatunṣe apẹrẹ yẹn fun awọn ẹrọ nla. Eyi ṣe imudara CSS rẹ, ṣe ilọsiwaju akoko ṣiṣe, ati pese iriri nla fun awọn alejo rẹ.

Awọn aaye isinmi ti o wa

Bootstrap pẹlu awọn aaye fifọ aiyipada mẹfa, nigbakan tọka si bi awọn ipele akoj , fun kikọ ni idahun. Awọn aaye fifọ wọnyi le jẹ adani ti o ba nlo awọn faili Sass orisun wa.

Breakpoint Infix kilasi Awọn iwọn
X-Kekere Ko si <576px
Kekere sm ≥576px
Alabọde md ≥768px
Tobi lg ≥992px
Afikun nla xl ≥1200px
Afikun afikun ti o tobi xxl ≥1400px

Kọọkan breakpoint ti a ti yan lati ni itunu mu awọn apoti ti widths ni o wa ọpọ ti 12. Breakpoints ni o wa tun asoju ti a ayosile ti wọpọ ẹrọ titobi ati viewport mefa-won ko ba ko pataki Àkọlé gbogbo lilo irú tabi ẹrọ. Dipo, awọn sakani pese ipilẹ to lagbara ati deede lati kọ lori fun fere eyikeyi ẹrọ.

Awọn aaye fifọ wọnyi jẹ isọdi nipasẹ Sass — iwọ yoo rii wọn ni maapu Sass kan ninu iwe aṣa wa _variables.scss.

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

Fun alaye diẹ sii ati awọn apẹẹrẹ lori bii o ṣe le yipada awọn maapu Sass wa ati awọn oniyipada, jọwọ tọka si apakan Sass ti iwe Grid .

Media ibeere

Niwọn igba ti Bootstrap ti ni idagbasoke lati jẹ alagbeka ni akọkọ, a lo ọwọ diẹ ti awọn ibeere media lati ṣẹda awọn aaye fifọ ni oye fun awọn ipalemo ati awọn atọkun wa. Awọn aaye fifọ wọnyi da lori awọn iwọn iwọn wiwo ti o kere julọ ati gba wa laaye lati ṣe iwọn awọn eroja bi wiwo wiwo ṣe yipada.

Iwọn-min

Bootstrap ni akọkọ nlo awọn sakani ibeere media atẹle wọnyi—tabi awọn aaye fifọ-ni awọn faili Sass orisun wa fun iṣeto wa, eto akoj, ati awọn paati.

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

Awọn alapọpọ Sass wọnyi tumọ sinu CSS ti a ṣajọ ni lilo awọn iye ti a kede ninu awọn oniyipada Sass wa. Fun apere:

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

Iwọn ti o pọju

Lẹẹkọọkan a lo awọn ibeere media ti o lọ si ọna miiran (iwọn iboju ti a fun tabi kere si ):

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

Awọn apopọ wọnyi mu awọn aaye fifọ ti a kede, yọkuro kuro .02pxninu wọn, ki o lo wọn bi awọn max-widthiye wa. Fun apere:

// 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
Kilode ti yọkuro .02px? Awọn aṣawakiri ko lọwọlọwọ ṣe atilẹyin awọn ibeere ọrọ-ọrọ sakani , nitorinaa a ṣiṣẹ ni ayika awọn aropin min-ati awọn ami- max-iṣaaju ati awọn iwoye pẹlu awọn iwọn ida (eyiti o le waye labẹ awọn ipo kan lori awọn ẹrọ dpi giga, fun apẹẹrẹ) nipa lilo awọn iye pẹlu konge giga.

Oju-iwe fifọ ẹyọkan

Awọn ibeere media tun wa ati awọn alapọpọ fun ibi-afẹde apakan kan ti awọn iwọn iboju ni lilo iwọn ti o kere ju ati iwọn fifọ aaye ti o pọju.

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

Fun apẹẹrẹ, @include media-breakpoint-only(md) { ... }yoo ja si:

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

Laarin breakpoints

Bakanna, awọn ibeere media le gun ọpọ awọn iwọn fifọ ojuami:

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

Ewo ni abajade ninu:

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