Ringkesan

Komponen lan opsi kanggo nggawe proyek Bootstrap, kalebu wadah bungkus, sistem kothak sing kuat, obyek media sing fleksibel, lan kelas sarana responsif.

Wadhah

Wadah minangka unsur tata letak paling dhasar ing Bootstrap lan dibutuhake nalika nggunakake sistem kothak standar . Wadah digunakake kanggo ngemot, pad, lan (kadhangkala) pusat konten ing njero. Nalika kontaner bisa disarangke, umume tata letak ora mbutuhake wadhah bersarang.

Bootstrap dilengkapi telung wadhah sing beda:

• .container, sing nyetel max-widthing saben breakpoint responsif
• .container-fluid, width: 100%kang ing kabeh breakpoints
• .container-{breakpoint}, sing width: 100%nganti breakpoint sing ditemtokake

Tabel ing ngisor iki nggambarake carane saben wadhah max-widthmbandhingake karo asline .containerlan .container-fluiding saben breakpoint.

Deleng ing tumindak lan mbandhingake ing conto Grid kita .

Kabeh-ing-siji

Kelas standar kita .containerminangka wadhah sing responsif, ambane tetep, tegese owah- max-widthowahan ing saben breakpoint.

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

Cairan

Gunakake .container-fluidkanggo wadhah ambane lengkap, ngecakup kabeh jembar viewport.

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

Responsif

Wadhah responsif anyar ing Bootstrap v4.4. Padha ngidini sampeyan kanggo nemtokake kelas sing 100% sudhut nganti breakpoint ditemtokake, sawise max-widthkang kita aplikasi s kanggo saben breakpoints luwih. Contone, .container-smiku 100% amba kanggo miwiti nganti smbreakpoint tekan, ngendi iku bakal ukuran munggah karo md, lg, lan 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>

Breakpoints responsif

Wiwit Bootstrap dikembangake dadi seluler pisanan, kita nggunakake sawetara pitakon media kanggo nggawe breakpoints sing wicaksana kanggo tata letak lan antarmuka. Breakpoints iki biasane adhedhasar jembar viewport minimal lan ngidini kita nggedhekake unsur nalika viewport diganti.

Bootstrap utamane nggunakake kisaran pitakon media ing ngisor iki-utawa breakpoints-ing file Sass sumber kanggo tata letak, sistem kothak, lan komponen.

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

Awit kita nulis CSS sumber kita ing Sass, kabeh pitakon media kasedhiya liwat 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;
  }
}

Kita sok-sok nggunakake pitakon media sing pindhah menyang arah liyane (ukuran layar sing diwenehake utawa luwih cilik ):

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

Sawise maneh, pitakon media iki uga kasedhiya liwat 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;
  }
}

Ana uga pitakon media lan mixin kanggo nargetake bagean siji saka ukuran layar nggunakake jembar breakpoint minimal lan 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) { ... }

Pitakonan media iki uga kasedhiya liwat 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) { ... }

Kajaba iku, pitakon media bisa uga ngluwihi sawetara jembar breakpoint:

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

Campuran Sass kanggo nargetake sawetara ukuran layar sing padha yaiku:

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

Z-indeks

Sawetara komponen Bootstrap nggunakake z-index, properti CSS sing mbantu ngatur tata letak kanthi menehi sumbu katelu kanggo ngatur konten. Kita nggunakake skala indeks z standar ing Bootstrap sing wis dirancang kanggo pandhu arah lapisan, tooltips lan popovers, modal, lan liya-liyane.

Nilai-nilai sing luwih dhuwur iki diwiwiti kanthi angka sing sewenang-wenang, dhuwur lan cukup spesifik kanggo ngindhari konflik. Kita butuh set standar iki ing kabeh komponen sing dilapisi - tooltips, popovers, navbars, dropdowns, modals-supaya kita bisa cukup konsisten ing prilaku. Ora ana alesan kita ora bisa nggunakake 100+ utawa 500+.

Kita ora nyengkuyung kustomisasi nilai individu kasebut; yen sampeyan ngganti siji, sampeyan bisa uga kudu ngganti kabeh.

$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;

Kanggo nangani wates sing tumpang tindih ing komponen (contone, tombol lan input ing grup input), kita nggunakake angka siji digit kurang z-indexsaka 1, 2, lan 3kanggo standar, hover, lan negara aktif. Ing hover / fokus / aktif, kita nggawa unsur tartamtu menyang ngarep karo nilai sing luwih dhuwur z-indexkanggo nuduhake tapel wates karo unsur sedulur.