Overview

Mga sangkap ug mga kapilian alang sa pagbutang sa imong proyekto sa Bootstrap, lakip ang mga sulud sa pagputos, usa ka kusgan nga sistema sa grid, usa ka nabag-o nga butang sa media, ug mga klase nga magamit sa pagtubag.

Mga sudlanan

Ang mga sudlanan mao ang labing sukaranan nga elemento sa layout sa Bootstrap ug gikinahanglan kung gamiton ang among default grid system . Ang mga sudlanan gigamit sa pagtago, pad, ug (usahay) isentro ang sulud sa sulod niini. Samtang ang mga sudlanan mahimong salag, kadaghanan sa mga layout wala magkinahanglan usa ka salag nga sudlanan.

Ang Bootstrap adunay tulo ka lainlaing mga sudlanan:

• .container, nga nagtakda ug max-widthsa matag responsive breakpoint
• .container-fluid, nga anaa width: 100%sa tanang breakpoints
• .container-{breakpoint}, nga width: 100%hangtod sa gitakda nga breakpoint

Ang lamesa sa ubos naghulagway kung giunsa pagtandi ang matag sudlanan max-widthsa orihinal .containerug .container-fluidsa matag breakpoint.

Tan-awa sila sa aksyon ug itandi sila sa among Grid nga panig-ingnan .

Tanan sa usa

Ang among default .containernga klase usa ka responsive, fixed-width nga sudlanan, nagpasabut nga ang mga max-widthpagbag-o niini sa matag breakpoint.

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

Fluid

Gigamit .container-fluidalang sa usa ka bug-os nga gilapdon nga sudlanan, nga nagsangkad sa tibuuk nga gilapdon sa viewport.

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

Makatubag

Ang mga responsive nga sudlanan bag-o sa Bootstrap v4.4. Gitugotan ka nila nga ipiho ang usa ka klase nga 100% ang gilapdon hangtod maabot ang gitakda nga breakpoint, pagkahuman among i-apply max-widthang s alang sa matag usa sa mas taas nga mga breakpoint. Pananglitan, .container-sm100% ang gilapdon aron magsugod hangtod smmaabot ang breakpoint, diin kini motaas sa md, lg, ug 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>

Responsive nga mga breakpoint

Tungod kay ang Bootstrap gihimo aron mahimong mobile una, naggamit kami og pipila ka mga pangutana sa media aron makahimo og makatarunganon nga mga breakpoint alang sa among mga layout ug interface. Kini nga mga breakpoint kasagaran gibase sa pinakagamay nga viewport widths ug nagtugot kanamo sa pag-scale sa mga elemento samtang ang viewport mausab.

Ang Bootstrap sa panguna naggamit sa mosunod nga media query ranges—o breakpoints—sa among source Sass files para sa among layout, grid system, ug mga component.

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

Tungod kay gisulat namon ang among gigikanan nga CSS sa Sass, ang tanan namon nga mga pangutana sa media magamit pinaagi sa mga mix sa 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;
  }
}

Usahay migamit kami og mga pangutana sa media nga moadto sa laing direksyon (ang gihatag nga gidak-on sa screen o mas gamay ):

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

Sa makausa pa, kini nga mga pangutana sa media magamit usab pinaagi sa 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;
  }
}

Adunay usab mga pangutana sa media ug mga mixin alang sa pag-target sa usa ka bahin sa mga gidak-on sa screen gamit ang minimum ug maximum nga gilapdon sa 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) { ... }

Kini nga mga pangutana sa media magamit usab pinaagi sa Sass mixins:

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

Sa susama, ang mga pangutana sa media mahimong mosangkad sa daghang gilapdon sa 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 alang sa pag-target sa parehas nga gidak-on sa gidak-on sa screen mao ang:

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

Z-index

Ubay-ubay nga mga sangkap sa Bootstrap ang naggamit z-index, ang CSS property nga makatabang sa pagkontrolar sa layout pinaagi sa paghatag ug ikatulo nga axis sa paghan-ay sa sulod. Gigamit namo ang default z-index nga sukdanan sa Bootstrap nga gidesinyo sa hustong pag-layer sa nabigasyon, tooltips ug popovers, modals, ug uban pa.

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;

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.