Breakpoints

Breakpoints minangka jembar sing bisa disesuaikan sing nemtokake cara tata letak responsif sampeyan ing ukuran piranti utawa viewport ing Bootstrap.

Ing kaca iki

Konsep inti

Breakpoints minangka blok bangunan desain responsif. Gunakake kanggo ngontrol nalika tata letak sampeyan bisa diadaptasi ing viewport utawa ukuran piranti tartamtu.
Gunakake pitakon media kanggo ngrancang CSS kanthi breakpoint. Pitakonan media minangka fitur CSS sing ngidini sampeyan ngetrapake gaya miturut sakumpulan paramèter browser lan sistem operasi. Sing paling umum digunakake min-widthing pitakon media.
Ponsel pisanan, desain responsif minangka tujuane. CSS Bootstrap nduweni tujuan kanggo ngetrapake gaya minimal kanggo nggawe tata letak bisa digunakake ing breakpoint paling cilik, banjur lapisan gaya kanggo nyetel desain kasebut kanggo piranti sing luwih gedhe. Iki ngoptimalake CSS sampeyan, nambah wektu rendering, lan menehi pengalaman sing apik kanggo pengunjung.

breakpoints kasedhiya

Bootstrap kalebu enem breakpoints standar, kadhangkala disebut minangka undakan kothak , kanggo mbangun responsif. Titik putus iki bisa disesuaikan yen sampeyan nggunakake file Sass sumber kita.

Titik putus	Infiks kelas	ukuran
Ekstra cilik	ora ana	<576px
Cilik	`sm`	≥576 piksel
Sedheng	`md`	≥768 piksel
Gedhe	`lg`	≥992px
Ekstra gedhe	`xl`	≥1200px
Ekstra ekstra gedhe	`xxl`	≥1400px

Saben breakpoint dipilih kanggo mulyo nyekeli wadhah sing jembaré kelipatan 12. Breakpoints uga wakil saka subset saka ukuran piranti umum lan dimensi viewport-padha ora target khusus saben kasus panggunaan utawa piranti. Nanging, kisaran kasebut nyedhiyakake dhasar sing kuat lan konsisten kanggo dibangun kanggo meh kabeh piranti.

Breakpoints iki bisa disesuaikan liwat Sass-sampeyan bakal nemokake ing peta Sass ing _variables.scssstylesheet kita.

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

Kanggo informasi luwih lengkap lan conto babagan carane ngowahi peta lan variabel Sass, waca bagean Sass saka dokumentasi Grid .

Pitakonan media

Wiwit Bootstrap dikembangake dadi seluler pisanan, kita nggunakake sawetara pitakon media kanggo nggawe breakpoints sing wicaksana kanggo tata letak lan antarmuka. Breakpoints iki biasane adhedhasar jembar viewport minimal lan ngidini kita nggedhekake unsur nalika viewport diganti.

Min-jembaré

Bootstrap utamane nggunakake kisaran pitakon media ing ngisor iki-utawa breakpoints-ing file Sass sumber kanggo tata letak, sistem kothak, lan komponen.

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

Campuran Sass iki nerjemahake ing CSS kompilasi nggunakake nilai sing diumumake ing variabel Sass kita. Tuladhane:

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

Max-jembaré

Kita sok-sok nggunakake pitakon media sing pindhah menyang arah liyane (ukuran layar sing diwenehake utawa luwih cilik ):

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

Mixin iki njupuk breakpoints sing diumumake, nyuda .02px, lan digunakake minangka max-widthnilai kita. Tuladhane:

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

Napa nyuda .02px? Browser saiki ora ndhukung pitakon konteks jangkoan , mula kita bisa ngatasi watesan min-lan max-prefiks lan viewport kanthi jembar pecahan (sing bisa kedadeyan ing kahanan tartamtu ing piranti dpi dhuwur, contone) kanthi nggunakake nilai kanthi presisi sing luwih dhuwur.

Titik putus tunggal

Ana uga pitakon media lan mixin kanggo nargetake bagean siji saka ukuran layar nggunakake jembar breakpoint minimal lan maksimum.

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

Contone @include media-breakpoint-only(md) { ... }bakal nyebabake:

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

Antarane breakpoints

Kajaba iku, pitakon media bisa uga ngluwihi sawetara jembar breakpoint:

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

Sing nyebabake:

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