Pangkalahatang-ideya

Mga bahagi at opsyon para sa paglalagay ng iyong proyekto sa Bootstrap, kabilang ang mga wrapping container, isang malakas na grid system, isang flexible na object ng media, at mga tumutugon na utility class.

Mga lalagyan

Ang mga lalagyan ay ang pinakapangunahing elemento ng layout sa Bootstrap at kinakailangan kapag ginagamit ang aming default na grid system . Ang mga lalagyan ay ginagamit upang maglaman, maglagay ng pad, at (kung minsan) isentro ang nilalaman sa loob ng mga ito. Bagama't maaaring ma-nest ang mga container, karamihan sa mga layout ay hindi nangangailangan ng nested container.

Ang Bootstrap ay may tatlong magkakaibang lalagyan:

• .container, na nagtatakda ng max-widthsa bawat tumutugon na breakpoint
• .container-fluid, na width: 100%nasa lahat ng breakpoints
• .container-{breakpoint}, na width: 100%hanggang sa tinukoy na breakpoint

Ang talahanayan sa ibaba ay naglalarawan kung paano inihahambing ang bawat lalagyan max-widthsa orihinal .containerat sa .container-fluidbawat breakpoint.

Tingnan ang mga ito sa pagkilos at ihambing ang mga ito sa aming halimbawa ng Grid .

Lahat sa isa

Ang aming default .containerna klase ay isang tumutugon, fixed-width na lalagyan, ibig sabihin ang mga max-widthpagbabago nito sa bawat breakpoint.

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

Fluid

Gamitin .container-fluidpara sa isang buong lapad na lalagyan, na sumasaklaw sa buong lapad ng viewport.

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

Tumutugon

Ang mga tumutugong container ay bago sa Bootstrap v4.4. Nagbibigay-daan sa iyo ang mga ito na tumukoy ng klase na 100% ang lapad hanggang sa maabot ang tinukoy na breakpoint, pagkatapos nito ay naglalapat kami max-widthng s para sa bawat isa sa mas matataas na breakpoint. Halimbawa, .container-sm100% ba ang lapad upang magsimula hanggang sa smmaabot ang breakpoint, kung saan lalago ito ng md, lg, at 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>

Mga tumutugon na breakpoint

Dahil ang Bootstrap ay binuo upang maging mobile muna, gumagamit kami ng ilang mga query sa media upang lumikha ng mga makabuluhang breakpoint para sa aming mga layout at interface. Ang mga breakpoint na ito ay kadalasang nakabatay sa mga minimum na lapad ng viewport at nagbibigay-daan sa amin na palakihin ang mga elemento habang nagbabago ang viewport.

Pangunahing ginagamit ng Bootstrap ang mga sumusunod na hanay ng query ng media—o mga breakpoint—sa aming source na Sass file para sa aming layout, grid system, at mga bahagi.

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

Dahil isinusulat namin ang aming source CSS sa Sass, available ang lahat ng aming mga query sa media sa pamamagitan ng Sass mixin:

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

Paminsan-minsan, gumagamit kami ng mga query sa media na papunta sa kabilang direksyon (ang ibinigay na laki ng screen o mas maliit ):

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

Muli, available din ang mga query sa media na ito sa pamamagitan ng Sass mixins:

@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;
  }
}

Mayroon ding mga media query at mixin para sa pag-target ng isang segment ng mga laki ng screen gamit ang minimum at maximum na lapad ng breakpoint.

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

Available din ang mga query sa media na ito sa pamamagitan ng Sass mixin:

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

Katulad nito, ang mga query sa media ay maaaring sumasaklaw sa maraming lapad ng breakpoint:

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

Ang Sass mixin para sa pag-target sa parehong hanay ng laki ng screen ay magiging:

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

Z-index

Ginagamit ng ilang bahagi ng Bootstrap z-indexang , ang CSS property na tumutulong sa pagkontrol ng layout sa pamamagitan ng pagbibigay ng ikatlong axis upang ayusin ang nilalaman. Gumagamit kami ng default na z-index scale sa Bootstrap na idinisenyo upang maayos na i-layer ang navigation, tooltips at popover, modals, at higit pa.

Ang mas matataas na halagang ito ay nagsisimula sa isang di-makatwirang numero, mataas at sapat na partikular upang perpektong maiwasan ang mga salungatan. Kailangan namin ng karaniwang hanay ng mga ito sa aming mga layered na bahagi—mga tooltip, popover, navbar, dropdown, modals—upang makatuwirang maging pare-pareho tayo sa mga gawi. Walang dahilan kung bakit hindi namin ginamit ang 100+ o 500+.

Hindi namin hinihikayat ang pag-customize ng mga indibidwal na halagang ito; kung magpalit ka ng isa, malamang na kailangan mong baguhin ang lahat.

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

Upang pangasiwaan ang mga magkakapatong na hangganan sa loob ng mga bahagi (hal., mga button at input sa mga pangkat ng input), gumagamit kami ng mababang solong digit z-indexna halaga ng 1, 2, at 3para sa default, hover, at mga aktibong estado. Sa hover/focus/active, dinadala namin ang isang partikular na elemento sa unahan na may mas mataas z-indexna halaga upang ipakita ang kanilang hangganan sa mga elemento ng magkakapatid.