Source

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 . Pilih saka wadhah sing responsif, ambane tetep (tegese owah- max-widthowahan ing saben breakpoint) utawa jembar cairan (tegese 100%jembar kabeh).

Nalika kontaner bisa disarang, umume tata letak ora mbutuhake wadhah bersarang.

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

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

<div class="container-fluid">
  ...
</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 kita 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;
  }
}

Kadhangkala kita 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

Elinga, amarga browser saiki ora ndhukung pitakon konteks jangkoan , kita bisa ngatasi watesan min-lan max-prefiks lan viewport kanthi jembar pecahan (sing bisa kedadeyan ing kahanan tartamtu ing piranti dpi dhuwur, umpamane) kanthi nggunakake nilai kanthi presisi sing luwih dhuwur kanggo mbandhingake. .

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 campuran 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 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.