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 . Pumili mula sa tumutugon, fixed-width na lalagyan (ibig sabihin ang mga max-widthpagbabago nito sa bawat breakpoint) o fluid-width (ibig sabihin ay 100%malawak ito sa lahat ng oras).

Bagama't maaaring ma-nest ang mga container, karamihan sa mga layout ay hindi nangangailangan ng nested container.

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

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

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

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

$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 mga 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.