Breakpoints

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.

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:

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

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