Breakpoint

Konsep inti

• Breakpoints adalah blok bangunan dari desain responsif. Gunakan mereka untuk mengontrol kapan tata letak Anda dapat disesuaikan pada area pandang atau ukuran perangkat tertentu.

• Gunakan kueri media untuk merancang CSS Anda dengan breakpoint. Kueri media adalah fitur CSS yang memungkinkan Anda menerapkan gaya secara kondisional berdasarkan sekumpulan parameter browser dan sistem operasi. Kami paling sering menggunakan min-widthkueri media kami.

• Ponsel pertama, desain responsif adalah tujuannya. CSS Bootstrap bertujuan untuk menerapkan gaya minimal untuk membuat tata letak berfungsi pada titik putus terkecil, dan kemudian melapisi gaya untuk menyesuaikan desain itu untuk perangkat yang lebih besar. Ini mengoptimalkan CSS Anda, meningkatkan waktu rendering, dan memberikan pengalaman hebat bagi pengunjung Anda.

Breakpoint yang tersedia

Bootstrap menyertakan enam breakpoint default, terkadang disebut sebagai grid tiers , untuk membangun secara responsif. Breakpoint ini dapat dikustomisasi jika Anda menggunakan file Sass sumber kami.

Setiap breakpoint dipilih untuk menampung container dengan lebar kelipatan 12 dengan nyaman. Breakpoint juga mewakili subset ukuran perangkat umum dan dimensi area pandang—tidak secara spesifik menargetkan setiap kasus penggunaan atau perangkat. Sebaliknya, rentang memberikan fondasi yang kuat dan konsisten untuk dibangun di hampir semua perangkat.

Breakpoint ini dapat disesuaikan melalui Sass—Anda akan menemukannya di peta Sass di _variables.scssstylesheet kami.

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

Untuk informasi lebih lanjut dan contoh tentang cara memodifikasi peta dan variabel Sass kami, silakan merujuk ke bagian Sass dari dokumentasi Grid .

Pertanyaan media

Karena Bootstrap dikembangkan untuk menjadi yang pertama untuk seluler, kami menggunakan beberapa kueri media untuk membuat breakpoint yang masuk akal untuk tata letak dan antarmuka kami. Breakpoint ini sebagian besar didasarkan pada lebar viewport minimum dan memungkinkan kita untuk meningkatkan elemen saat viewport berubah.

Lebar minimum

Bootstrap terutama menggunakan rentang kueri media berikut—atau titik putus—dalam file Sass sumber kami untuk tata letak, sistem kisi, dan komponen kami.

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

Mixin Sass ini diterjemahkan dalam CSS terkompilasi kami menggunakan nilai yang dideklarasikan dalam variabel Sass kami. Sebagai contoh:

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

Lebar maks

Kami terkadang menggunakan kueri media yang mengarah ke arah lain (ukuran layar tertentu atau lebih kecil ):

// 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 ini mengambil breakpoint yang dideklarasikan, menguranginya .02px, dan menggunakannya sebagai max-widthnilai kita. Sebagai contoh:

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

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

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

For example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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