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 nga grid system . Ang mga sudlanan gigamit sa pagtago, pad, ug (usahay) isentro ang sulud sa sulod niini. Samtang ang mga sudlanan mahimong magsalag, 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 ehemplo .

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

Gamit .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 minimum 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 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 mix para sa pag-target sa usa ka bahin sa mga gidak-on sa screen gamit ang minimum ug labing taas 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-indexsa , 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.

Kining mas taas nga mga bili magsugod sa arbitraryong numero, taas ug espesipiko nga igo aron malikayan ang mga panagbangi. Nagkinahanglan kami og standard set niini sa among layered nga mga component—tooltips, popovers, navbars, dropdowns, modals—aron kita mahimong makatarunganon nga makanunayon sa mga kinaiya. Walay rason nga dili namo magamit ang 100+ o 500+.

Wala kami nag-awhag sa pag-customize niining mga indibidwal nga mithi; kung usbon nimo ang usa, lagmit kinahanglan nimo nga usbon silang tanan.

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

Aron madumala ang nagsapaw-sapaw nga mga utlanan sulod sa mga sangkap (pananglitan, mga buton ug mga input sa input nga mga grupo), migamit kami og ubos nga single digit nga z-indexmga bili sa 1, 2, ug 3alang sa default, hover, ug aktibo nga mga estado. Sa hover/focus/aktibo, atong dad-on ang usa ka partikular nga elemento sa atubangan nga adunay mas taas z-indexnga bili aron ipakita ang ilang utlanan sa mga elemento sa igsoon.