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 . Wadah dipaké pikeun ngandung, pad, jeung (kadangkala) puseur eusi dina eta. Bari wadahna bisa nested, paling layouts teu merlukeun wadah nested.

Bootstrap hadir sareng tilu wadah anu béda:

• .container, nu nangtukeun hiji max-widthdi unggal breakpoint responsif
• .container-fluid, nu width: 100%dina sagala breakpoints
• .container-{breakpoint}, anu width: 100%dugi ka titik putus anu ditangtukeun

Tabél di handap ieu ngagambarkeun kumaha unggal wadahna max-widthdibandingkeun sareng anu asli .containersareng .container-fluiddina unggal breakpoint.

Tingali aranjeunna dina aksi sareng ngabandingkeunana dina conto Grid kami .

Sadaya-di-hiji

Kelas standar urang .containernyaéta responsif, wadahna tetep-lebar, hartina max-widthparobahanana dina unggal breakpoint.

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

Cairan

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

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

Responsif

wadah responsif anu anyar dina Bootstrap v4.4. Aranjeunna ngidinan Anjeun pikeun nangtukeun kelas anu 100% lega nepi ka breakpoint dieusian, nu satutasna urang nerapkeun max-widths pikeun tiap tina breakpoints luhur. Contona, .container-smnyaeta 100% lega pikeun ngamimitian nepi ka smbreakpoint nu geus ngahontal, dimana eta bakal skala nepi ka md, lg, jeung 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

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

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.