Titik putus

Konsep inti

• Breakpoints mangrupakeun blok wangunan desain responsif. Anggo aranjeunna pikeun ngontrol nalika perenah anjeun tiasa diadaptasi dina viewport atanapi ukuran alat tinangtu.

• Paké queries média pikeun arsiték CSS anjeun ku breakpoint. Média queries mangrupakeun fitur tina CSS nu ngidinan Anjeun pikeun conditionally nerapkeun gaya dumasar kana sakumpulan parameter browser sarta sistem operasi. Kami paling sering dianggo min-widthdina pamundut média urang.

• Mobile munggaran, desain responsif nyaéta tujuanana. CSS Bootstrap boga tujuan pikeun nerapkeun gaya minimal pikeun nyieun tata perenah dina titik breakpoint pangleutikna, lajeng lapisan dina gaya pikeun nyaluyukeun desain eta pikeun alat nu leuwih gede. Ieu ngaoptimalkeun CSS anjeun, ningkatkeun waktos rendering, sareng nyayogikeun pangalaman anu saé pikeun sémah anjeun.

breakpoints sadia

Bootstrap ngawengku genep breakpoints standar, sok disebut tiers grid , pikeun ngawangun responsif. Titik putus ieu tiasa disaluyukeun upami anjeun nganggo file Sass sumber kami.

Unggal breakpoint dipilih pikeun nyaman nahan wadah anu rubakna lilipetan tina 12. Breakpoints oge ngawakilan sawaréh tina ukuran alat umum jeung dimensi viewport-maranéhanana henteu husus nargétkeun unggal pamakean atawa alat. Gantina, rentang nyadiakeun yayasan kuat tur konsisten pikeun ngawangun dina ampir sagala alat.

Titik putus ieu tiasa disaluyukeun via Sass-anjeun bakal mendakanana dina peta Sass dina _variables.scssstylesheet kami.

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

Kanggo inpo nu leuwih lengkep sareng conto kumaha cara ngarobih peta sareng variabel Sass kami, mangga tingal bagian Sass tina dokuméntasi Grid .

Patarosan média

Kusabab Bootstrap dikembangkeun janten mobile heula, kami nganggo sakeupeul patarosan média pikeun nyiptakeun titik-titik putus anu wijaksana pikeun perenah sareng antarmuka kami. Breakpoints ieu lolobana dumasar kana rubak viewport minimum jeung ngidinan urang pikeun skala up elemen salaku viewport robah.

Min-lebar

Bootstrap utamana ngagunakeun rentang query média di handap ieu-atawa breakpoints-dina file Sass sumber urang pikeun tata perenah urang, sistem grid, sarta komponén.

// 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 ieu narjamahkeun dina CSS kami anu disusun nganggo nilai anu dinyatakeun dina variabel Sass kami. Salaku conto:

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

Urang aya kalana make queries média nu balik ka arah séjén (ukuran layar dibikeun atawa leuwih leutik ):

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

Campuran ieu nyandak titik putus anu dinyatakeun, ngirangan .02pxtina aranjeunna, sareng dianggo salaku max-widthnilai kami. Salaku conto:

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

Titik putus tunggal

Aya ogé patarosan média sareng campuran pikeun nargétkeun hiji bagean tina ukuran layar nganggo lebar breakpoint minimum sareng 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) { ... }

Salaku conto, @include media-breakpoint-only(md) { ... }bakal ngahasilkeun:

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

Antara breakpoints

Nya kitu, queries média bisa bentang sababaraha lebar breakpoint:

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

Anu nyababkeun:

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