Overview

Ny singa sy ny safidy amin'ny fametrahana ny tetikasa Bootstrap-nao, ao anatin'izany ny famonosana kaontenera, ny rafitra grid matanjaka, ny haino aman-jery mora azo, ary ny kilasin'ny fitaovana mandray andraikitra.

fitoeran

Ny kaontenera no singa fandrafetana fototra indrindra ao amin'ny Bootstrap ary ilaina rehefa mampiasa ny rafitry ny grid default . Ny kaontenera dia ampiasaina mba hitahirizana, pad, ary (indraindray) hampifantoka ny atiny ao anatiny. Na dia azo asiana akany aza ny kaontenera, ny ankamaroan'ny fandrindrana dia tsy mila kaontenera misy akany.

Bootstrap dia tonga miaraka amin'ny kaontenera telo samihafa:

• .container, izay mametraka a max-widthisaky ny teboka fiatoana mamaly
• .container-fluid, izay width: 100%amin'ny toerana tapaka rehetra
• .container-{breakpoint}, izay width: 100%mandra-pahatapitry ny fotoana voafaritra

Ny tabilao etsy ambany dia mampiseho ny max-widthfampitahana ny kaontenera tsirairay amin'ny tany am-boalohany .containersy .container-fluidmanerana ny teboka tsirairay.

Jereo amin'ny hetsika izy ireo ary ampitahao amin'ny ohatra Grid .

Rehetra-In-One

Ny .containerkilasin'ny mahazatra anay dia kaontenera mandray andraikitra, mirefy raikitra, midika izany fa ny max-widthfiovany isaky ny toerana tapaka.

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

tsiranoka

Ampiasaina .container-fluidho an'ny fitoeran-javatra mivelatra feno, mandrakotra ny sakan'ny seranan-tsambo manontolo.

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

manaiky

Vaovao ao amin'ny Bootstrap v4.4. Izy ireo dia mamela anao hamaritra kilasy iray izay 100% ny sakany mandra-pahatongan'ny teboka voatondro, ary avy eo dia mampihatra max-widths ho an'ny tsirairay amin'ireo teboka avo kokoa. Ohatra, .container-smdia 100% ny sakany hanombohana mandra-pahatongan'ny smteboka tapaka, izay hampiakatra azy amin'ny md, lg, ary 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>

Fiatoana mamaly

Koa satria ny Bootstrap dia novolavolaina ho finday voalohany, dia mampiasa fanontaniana media vitsivitsy izahay mba hamoronana fikatsahana saina ho an'ny drafitra sy ny interface. Ireo teboka fiatoana ireo dia mifototra amin'ny sakan'ny seranan-tsambo kely indrindra ary mamela antsika hampitombo ny singa rehefa miova ny seranan-tsambo.

Ny Bootstrap dia mampiasa voalohany indrindra ireto andiana fangatahana fampahalalam-baovao manaraka ireto—na teboka fiatoana—ao amin'ny rakitra Sass loharanontsika ho an'ny firafitry ny rafitra, ny rafitra ary ny singa.

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

Koa satria manoratra ny loharano CSS ao amin'ny Sass izahay, dia azo alaina amin'ny alalan'ny Sass mixins ny fanontanian'ny media rehetra:

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

Mampiasa fanontaniana amin'ny haino aman-jery mandeha amin'ny lalana hafa izahay indraindray (ny haben'ny efijery nomena na kely kokoa ):

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

Indray mandeha, ireto fanontaniana media ireto dia azo alaina amin'ny alàlan'ny Sass mixins ihany koa:

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

Misy ihany koa ny fangatahan'ny haino aman-jery sy ny mixins amin'ny fikojakojana ampahany tokana amin'ny haben'ny efijery amin'ny fampiasana ny sakany faran'izay kely indrindra sy ambony indrindra.

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

Ireo fanontaniana media ireo dia azo alaina amin'ny alàlan'ny 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) { ... }

Toy izany koa, ny fangatahan'ny haino aman-jery dia mety haharitra amin'ny sakan'ny fiatoana maro:

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

Ny mixin Sass ho an'ny tanjona mitovy amin'ny haben'ny efijery dia:

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

Z-index

Betsaka ny singa Bootstrap mampiasa z-index, ny fananana CSS izay manampy amin'ny fanaraha-maso ny layout amin'ny alàlan'ny fanomezana axis fahatelo handaminana votoaty. Mampiasa mari-pandrefesana z-index izahay ao amin'ny Bootstrap izay natao hanitsiana tsara ny fitetezana, toro-hevitra ary popover, modals ary maro hafa.

Ireo sanda ambony ireo dia manomboka amin'ny isa tsy misy dikany, avo sy voafaritra tsara mba hisorohana ny fifandirana. Mila andiana manara-penitra amin'ireo singa misy sosona isika—fitaovana, popovers, navbars, dropdowns, modals—mba hahafahantsika mifanaraka tsara amin'ny fitondrantena. Tsy misy antony tsy nahafahantsika nampiasa 100+ na 500+.

Tsy mamporisika ny fanamboarana ireo soatoavina manokana ireo izahay; raha hanova iray ianao dia mety mila manova azy rehetra.

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

Mba hifehezana ny sisin-tany mifanipaka ao anatin'ny singa (oh: ny bokotra sy ny fidirana ao amin'ny vondrona fampidirana), dia mampiasa z-indexsanda isa kely ambany ny 1, 2, ary 3ho an'ny default, hover, ary fanjakana mavitrika. Ao amin'ny hover/focus/active, dia mitondra singa iray manokana ho eo amin'ny lohalaharana miaraka amin'ny z-indexsanda ambony kokoa izahay mba hampisehoana ny sisin-taniny eo amin'ireo singa mpiray tampo.