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 . Wadah digunakan untuk menampung, melapisi, dan (terkadang) memusatkan konten di dalamnya. Meskipun container dapat disarangkan, sebagian besar tata letak tidak memerlukan container bersarang.

Bootstrap hadir dengan tiga wadah berbeda:

• .container, yang menetapkan a max-widthpada setiap breakpoint responsif
• .container-fluid, yang width: 100%sama sekali breakpoints
• .container-{breakpoint}, yaitu width: 100%sampai breakpoint yang ditentukan

Tabel di bawah mengilustrasikan max-widthperbandingan setiap penampung dengan aslinya .containerdan .container-fluiddi setiap titik henti sementara.

Lihat mereka beraksi dan bandingkan dalam contoh Grid kami .

Semua dalam satu

Kelas default kami .containeradalah wadah responsif dengan lebar tetap, yang berarti max-widthperubahannya di setiap breakpoint.

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

Cairan

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

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

Responsif

Wadah responsif baru di Bootstrap v4.4. Mereka memungkinkan Anda untuk menentukan kelas yang lebarnya 100% hingga titik henti sementara yang ditentukan tercapai, setelah itu kami menerapkan max-widths untuk setiap titik henti sementara yang lebih tinggi. Misalnya, .container-smlebar 100% untuk memulai hingga smbreakpoint tercapai, di mana ia akan ditingkatkan 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>

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

Karena kami menulis CSS sumber kami di Sass, semua kueri media kami tersedia melalui mixin 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 terkadang menggunakan kueri media yang mengarah ke arah lain (ukuran layar tertentu 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) { ... }
// 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;
  }
}

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.