Ringkasan

Komponen dan opsi untuk meletakkan proyek Bootstrap Anda, termasuk wadah pembungkus, sistem grid yang kuat, objek media yang fleksibel, dan kelas utilitas yang responsif.

Wadah

Wadah adalah elemen tata letak paling dasar di Bootstrap dan diperlukan saat menggunakan sistem grid default kami . Pilih dari container dengan lebar tetap yang responsif (artinya max-widthberubah di setiap titik henti sementara) atau lebar cair (artinya selalu 100%lebar).

Meskipun container dapat disarangkan, sebagian besar tata letak tidak memerlukan container bersarang.

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

Gunakan .container-fluiduntuk wadah lebar penuh, yang mencakup seluruh lebar viewport.

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

Breakpoint responsif

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.

Bootstrap terutama menggunakan rentang kueri media berikut—atau titik putus—dalam file Sass sumber kami untuk tata letak, sistem kisi, 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) { ... }

Karena kami menulis CSS sumber kami di Sass, semua kueri media kami tersedia melalui mixin 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 terkadang menggunakan kueri media yang mengarah ke arah lain (ukuran layar 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, kueri media ini juga tersedia melalui mixin Sass:

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

Ada juga kueri media dan mixin untuk menargetkan satu segmen ukuran layar menggunakan lebar titik henti sementara 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) { ... }

Kueri media ini juga tersedia melalui mixin 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) { ... }

Demikian pula, kueri media dapat menjangkau beberapa lebar titik henti sementara:

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

Mixin Sass untuk menargetkan rentang ukuran layar yang sama adalah:

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

Z-indeks

Beberapa komponen Bootstrap menggunakan z-index, properti CSS yang membantu mengontrol tata letak dengan menyediakan sumbu ketiga untuk mengatur konten. Kami menggunakan skala indeks-z default di Bootstrap yang telah dirancang untuk melapisi navigasi dengan benar, tooltips dan popovers, modals, dan banyak lagi.

Nilai-nilai yang lebih tinggi ini dimulai dari angka yang berubah-ubah, tinggi dan cukup spesifik untuk menghindari konflik secara ideal. Kami membutuhkan satu set standar ini di seluruh komponen berlapis kami — tooltips, popovers, navbars, dropdown, modals — sehingga kami dapat cukup konsisten dalam perilaku. Tidak ada alasan kami tidak bisa menggunakan 100+ atau 500+.

Kami tidak menganjurkan penyesuaian nilai individual ini; jika Anda mengubah satu, Anda mungkin perlu mengubah 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 menangani batas yang tumpang tindih dalam komponen (misalnya, tombol dan input dalam grup input), kami menggunakan z-indexnilai satu digit rendah dari 1, 2, dan 3untuk status default, arahkan kursor, dan status aktif. Saat mengarahkan/fokus/aktif, kami membawa elemen tertentu ke garis depan dengan nilai yang lebih tinggi z-indexuntuk menunjukkan batasnya di atas elemen saudara.