Titik putus

Konsep teras

• Titik putus adalah blok binaan reka bentuk responsif. Gunakannya untuk mengawal masa reka letak anda boleh disesuaikan pada port pandangan atau saiz peranti tertentu.

• Gunakan pertanyaan media untuk arkitek CSS anda mengikut titik putus. Pertanyaan media ialah ciri CSS yang membolehkan anda menggunakan gaya secara bersyarat berdasarkan set parameter penyemak imbas dan sistem pengendalian. Kami paling biasa gunakan min-widthdalam pertanyaan media kami.

• Mudah alih didahulukan, reka bentuk responsif adalah matlamatnya. CSS Bootstrap bertujuan untuk menggunakan gaya minimum kosong untuk membuat reka letak berfungsi pada titik putus terkecil, dan kemudian lapisan pada gaya untuk melaraskan reka bentuk itu untuk peranti yang lebih besar. Ini mengoptimumkan CSS anda, meningkatkan masa pemaparan dan memberikan pengalaman yang hebat untuk pelawat anda.

Titik putus yang tersedia

Bootstrap termasuk enam titik putus lalai, kadangkala dirujuk sebagai peringkat grid , untuk membina secara responsif. Titik putus ini boleh disesuaikan jika anda menggunakan fail Sass sumber kami.

Setiap titik putus telah dipilih untuk memegang bekas dengan selesa yang lebarnya adalah gandaan 12. Titik putus juga mewakili subset saiz peranti biasa dan dimensi ruang pandang—ia tidak menyasarkan setiap bekas atau peranti penggunaan secara khusus. Sebaliknya, julat menyediakan asas yang kukuh dan konsisten untuk dibina untuk hampir mana-mana peranti.

Titik putus ini boleh disesuaikan melalui Sass—anda akan menemuinya dalam peta Sass dalam _variables.scsslembaran gaya kami.

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

Untuk mendapatkan maklumat lanjut dan contoh tentang cara mengubah suai peta dan pembolehubah Sass kami, sila rujuk bahagian Sass dalam dokumentasi Grid .

Pertanyaan media

Memandangkan Bootstrap dibangunkan untuk menjadi mudah alih dahulu, kami menggunakan beberapa pertanyaan media untuk mencipta titik putus yang wajar untuk reka letak dan antara muka kami. Titik putus ini kebanyakannya berdasarkan pada lebar port pandangan minimum dan membolehkan kami meningkatkan elemen apabila port pandang berubah.

Lebar min

Bootstrap terutamanya menggunakan julat pertanyaan media berikut—atau titik putus—dalam fail Sass sumber kami untuk reka letak, sistem grid 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;
  }
}

Campuran Sass ini diterjemahkan dalam CSS terkumpul kami menggunakan nilai yang diisytiharkan dalam pembolehubah 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 maksimum

Kami kadangkala menggunakan pertanyaan media yang pergi ke arah lain (saiz skrin yang diberikan 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;
  }
}

Campuran ini mengambil titik putus yang diisytiharkan itu, tolak .02pxdaripadanya dan gunakannya sebagai max-widthnilai kami. Sebagai contoh:

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

Terdapat juga pertanyaan media dan campuran untuk menyasarkan satu segmen saiz skrin menggunakan lebar titik putus minimum dan 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) { ... }

Contohnya @include media-breakpoint-only(md) { ... }akan menghasilkan:

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

Antara titik putus

Begitu juga, pertanyaan media mungkin merangkumi berbilang lebar titik putus:

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

Yang menghasilkan:

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