Source

Ihtisar

Komponén sareng pilihan pikeun nempatkeun proyék Bootstrap anjeun, kalebet wadah bungkus, sistem grid anu kuat, objék média anu fleksibel, sareng kelas utiliti anu responsif.

Wadahna

Wadah mangrupikeun unsur perenah anu paling dasar dina Bootstrap sareng diperyogikeun nalika nganggo sistem grid standar kami . Pilih tina wadah anu responsif, lebar tetep (hartina max-widthparobahanana dina unggal titik putus) atanapi lebar cairan (hartosna 100%lebar sadaya waktos).

Bari wadahna bisa nested, paling layouts teu merlukeun wadah nested.

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

Paké .container-fluidpikeun wadahna rubak pinuh, Manjang sakabéh rubak viewport nu.

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

Breakpoints responsif

Kusabab Bootstrap dikembangkeun janten mobile heula, kami nganggo sakeupeul patarosan média pikeun nyiptakeun titik-titik putus anu wijaksana pikeun perenah sareng antarmuka kami. Breakpoints ieu lolobana dumasar kana rubak viewport minimum jeung ngidinan urang pikeun skala up elemen salaku viewport robah.

Bootstrap utamana ngagunakeun rentang query média di handap ieu-atawa breakpoints-dina file Sass sumber urang pikeun tata perenah urang, sistem grid, sarta komponén.

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

Kusabab urang nyerat sumber CSS kami di Sass, sadaya patarosan média kami sayogi ngalangkungan 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;
  }
}

Urang aya kalana make queries média nu balik ka arah séjén (ukuran layar dibikeun atawa leuwih leutik ):

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

Catet yén kumargi browser ayeuna henteu ngadukung patarosan kontéks rentang , urang ngerjakeun watesan min-sareng max-awalan sareng viewports kalayan rubak fraksional (anu tiasa lumangsung dina kaayaan anu tangtu dina alat-alat dpi luhur, contona) ku ngagunakeun nilai-nilai anu akurasi anu langkung luhur pikeun babandingan ieu. .

Sakali deui, patarosan média ieu ogé sayogi via 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;
  }
}

Aya ogé patarosan média sareng campuran pikeun nargétkeun hiji bagean tina ukuran layar nganggo lebar breakpoint minimum sareng 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) { ... }

Patarosan média ieu ogé sayogi via 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) { ... }

Nya kitu, queries média bisa bentang sababaraha lebar 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 pikeun nargétkeun rentang ukuran layar anu sami nyaéta:

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

Z-indéks

Sababaraha komponén Bootstrap ngagunakeun z-index, sipat CSS nu mantuan ngatur perenah ku nyadiakeun sumbu katilu pikeun ngatur eusi. Kami ngagunakeun skala z-indéks standar dina Bootstrap anu dirarancang pikeun leres ngalapis navigasi, tooltip sareng popovers, modal, sareng seueur deui.

Nilai-nilai anu langkung luhur ieu dimimitian ku jumlah anu sawenang-wenang, luhur sareng cukup khusus pikeun ngahindarkeun konflik sacara idéal. Kami peryogi set standar ieu dina komponén-komponén berlapis kami - tooltips, popovers, navbars, dropdowns, modals - supados urang tiasa konsisten dina paripolah. Henteu aya alesan urang henteu tiasa nganggo 100+ atanapi 500+.

Kami henteu ngadorong kustomisasi nilai individu ieu; mun anjeun ngarobah hiji, Anjeun kamungkinan kudu ngarobah 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;

Pikeun nanganan wates anu tumpang tindih dina komponén (contona, tombol sareng input dina grup input), kami nganggo z-indexnilai angka tunggal anu rendah tina 1, 2, sareng 3pikeun standar, hover, sareng kaayaan aktip. Dina hover / fokus / aktip, kami mawa unsur tinangtu ka forefront kalawan z-indexnilai luhur pikeun nembongkeun wates maranéhanana ngaliwatan elemen sibling.