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 . Misafidiana amin'ny fitoeran-javatra mandray andraikitra, mirefy raikitra (midika hoe max-widthfiovana isaky ny tapaka) na sakan'ny ranon-javatra (midika hoe 100%midadasika foana).

Na dia azo asiana akany aza ny kaontenera, ny ankamaroan'ny fandrindrana dia tsy mila kaontenera misy akany.

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

Ampiasao .container-fluidamin'ny fitoeran-javatra mivelatra feno, mandrakotra ny sakany manontolo amin'ny seranan-tsambo.

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

Fiatoana mamaly

Satria ny Bootstrap dia novolavolaina ho finday voalohany, dia mampiasa fanontaniana media vitsivitsy izahay mba hamoronana fikatsahana saina ho an'ny fandrindrana sy ny fifandraisana. 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 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 alàlan'ny Sass mixins ny fanontanian'ny media rehetra:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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-pamantarana z-index default izahay ao amin'ny Bootstrap izay natao hanitsiana ny navigateur, toro-làlana 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 fampidirana ao amin'ny vondrona fampidirana), dia mampiasa z-indexsanda tokana 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.