Source

Gambaran keseluruhan

Komponen dan pilihan untuk meletakkan projek Bootstrap anda, termasuk bekas pembalut, sistem grid yang berkuasa, objek media yang fleksibel dan kelas utiliti responsif.

Bekas

Bekas ialah elemen susun atur paling asas dalam Bootstrap dan diperlukan apabila menggunakan sistem grid lalai kami . Pilih daripada bekas yang responsif, lebar tetap (bermaksud max-widthperubahan pada setiap titik putus) atau lebar bendalir (bermaksud 100%lebar sepanjang masa).

Walaupun bekas boleh bersarang, kebanyakan reka letak tidak memerlukan bekas bersarang.

<div class="container">
  <!-- Content here -->
</div>

Gunakan .container-fluiduntuk bekas lebar penuh, merentangi keseluruhan lebar port pandangan.

<div class="container-fluid">
  ...
</div>

Titik putus responsif

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 pandangan berubah.

Bootstrap terutamanya menggunakan julat pertanyaan media berikut—atau titik putus—dalam fail Sass sumber kami untuk reka letak, sistem grid dan komponen kami.

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

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Memandangkan kami menulis CSS sumber kami dalam Sass, semua pertanyaan media kami tersedia melalui campuran Sass:

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

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

Kami kadangkala menggunakan pertanyaan media yang pergi ke arah lain (saiz skrin yang diberikan atau lebih kecil ):

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

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Ambil perhatian bahawa memandangkan penyemak imbas pada masa ini tidak menyokong pertanyaan konteks julat , kami menangani had min-dan max-awalan dan port pandangan dengan lebar pecahan (yang boleh berlaku dalam keadaan tertentu pada peranti dpi tinggi, contohnya) dengan menggunakan nilai dengan ketepatan yang lebih tinggi untuk perbandingan ini .

Sekali lagi, pertanyaan media ini juga tersedia melalui campuran Sass:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Terdapat juga pertanyaan media dan campuran untuk menyasarkan satu segmen saiz skrin menggunakan lebar titik putus minimum dan maksimum.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Pertanyaan media ini juga tersedia melalui campuran Sass:

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

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

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

Campuran Sass untuk menyasarkan julat saiz skrin yang sama ialah:

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

Indeks Z

Beberapa komponen Bootstrap menggunakan z-index, sifat CSS yang membantu mengawal reka letak dengan menyediakan paksi ketiga untuk mengatur kandungan. Kami menggunakan skala indeks z lalai dalam Bootstrap yang telah direka bentuk untuk melapis navigasi, petua alat dan popover, modal dan banyak lagi dengan betul.

Nilai yang lebih tinggi ini bermula pada nombor arbitrari, tinggi dan cukup khusus untuk mengelakkan konflik secara ideal. Kami memerlukan set standard ini merentas komponen berlapis kami—petua alat, popover, bar navigasi, lungsur turun, mod—supaya kita boleh konsisten dalam tingkah laku yang munasabah. Tiada sebab kami tidak boleh menggunakan 100+ atau 500+.

Kami tidak menggalakkan penyesuaian nilai individu ini; sekiranya anda menukar satu, anda mungkin perlu menukar semuanya.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Untuk mengendalikan sempadan bertindih dalam komponen (cth, butang dan input dalam kumpulan input), kami menggunakan z-indexnilai satu digit rendah 1, 2, dan 3untuk keadaan lalai, tuding dan aktif. Pada tuding/fokus/aktif, kami membawa elemen tertentu ke hadapan dengan nilai yang lebih tinggi z-indexuntuk menunjukkan sempadannya ke atas elemen adik-beradik.