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 . Bekas digunakan untuk mengandungi, meletakkan dan (kadangkala) memusatkan kandungan di dalamnya. Walaupun bekas boleh bersarang, kebanyakan reka letak tidak memerlukan bekas bersarang.

Bootstrap datang dengan tiga bekas berbeza:

• .container, yang menetapkan a max-widthpada setiap titik putus responsif
• .container-fluid, yang berada width: 100%pada semua titik putus
• .container-{breakpoint}, iaitu width: 100%sehingga titik putus yang ditentukan

Jadual di bawah menggambarkan bagaimana setiap bekas max-widthdibandingkan dengan yang asal .containerdan .container-fluidmerentasi setiap titik putus.

Lihat mereka dalam tindakan dan bandingkan mereka dalam contoh Grid kami .

Semua-dalam-satu

Kelas lalai kami .containerialah bekas yang responsif, lebar tetap, bermakna max-widthperubahannya pada setiap titik putus.

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

Cecair

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

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

Responsif

Bekas responsif adalah baharu dalam Bootstrap v4.4. Mereka membenarkan anda untuk menentukan kelas yang 100% lebar sehingga titik putus yang ditentukan dicapai, selepas itu kami menggunakan max-widths untuk setiap titik putus yang lebih tinggi. Sebagai contoh, .container-smadalah 100% lebar untuk bermula sehingga smtitik putus dicapai, di mana ia akan meningkat dengan md, lg, dan xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</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

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.