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

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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

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

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.