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 . Pagpili gikan sa usa ka responsive, fixed-width nga sudlanan (nagpasabot nga ang mga max-widthkausaban niini sa matag breakpoint) o fluid-width (nagpasabot nga kini 100%lapad sa tanang panahon).

Samtang ang mga sudlanan mahimong magsalag, kadaghanan sa mga layout wala magkinahanglan usa ka salag nga sudlanan.

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

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>

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 mga grupo sa pag-input), migamit kami og ubos nga single digit nga z-indexkantidad 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.