Vaaiga lautele

Vaega ma filifiliga mo le tuʻuina atu o lau poloketi Bootstrap, e aofia ai pusa afifi, se faiga faʻaogaina malosi, se mea faʻasalalau fetuutuunai, ma vasega faʻaoga tali.

Koneteina

O atigipusa o le elemene sili ona faʻatulagaina i Bootstrap ma e manaʻomia pe a faʻaogaina le matou faʻaogaina le faʻaogaina o le faʻaogaina . Filifili mai se atigipusa tali, fa'amau-lautele (o lona uiga o ona max-widthsuiga i vaega ta'itasi ta'atia) po'o le vai-lautele (o lona uiga e 100%lautele i taimi uma).

E ui e mafai ona fa'aputuina pusa, ae o le tele o fa'atulagaga e le mana'omia ai se fa'aputuga.

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

Fa'aoga .container-fluidmo se atigipusa lautele lautele, fa'asaga i le lautele atoa o le va'aiga.

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

Fa'alavelave tali

Talu ai ona o le Bootstrap ua atiaʻe e avea muamua ma telefoni feaveaʻi, matou te faʻaogaina ni nai faʻamatalaga faʻasalalau e fai ai ni vaʻa maaleale mo a matou faʻatulagaga ma fesoʻotaʻiga. O nei vaeluaga e tele lava e fa'avae i luga ole la'ititi ole va'aiga lautele ma fa'ataga ai tatou e fa'asili elemene pe a suia le va'aiga.

O lo'o fa'aaoga muamua e Bootstrap vaega o fesili fa'asalalau nei—po'o fa'amavaega—i la tatou fa'apogai faila Sass mo la tatou fa'atulagaina, faiga fa'asologa, ma vaega.

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

Talu ai matou te tusia la matou puna CSS i Sass, o matou fesili uma a le aufaasālalau e avanoa e ala i Sass mixins:

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

Matou te faʻaogaina i nisi taimi fesili faʻasalalau e alu i le isi itu (le lapopoa o le lau pe laʻititi ):

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

Toe tasi, o nei faʻasalalauga fesili o loʻo avanoa foi e ala i Sass mixins:

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

O lo'o iai fo'i su'esu'ega fa'asalalau ma fa'afefiloi mo le fa'atatauina o se vaega se tasi o lapo'a mata e fa'aaoga ai le la'ititi ma le maualuga o le lautele o le vaeluaga.

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

O lo'o avanoa fo'i nei fesili fa'asalalau e ala i 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) { ... }

E fa'apena fo'i, o fa'asalalauga fa'asalalauga e mafai ona fa'alautele le tele o vaeluaga o le vaeluaga:

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

O le Sass mixin mo le faʻatatauina o le lapoʻa tutusa o le lau o le:

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

Z-faasinoupu

E tele vaega Bootstrap e fa'aogaina z-index, le CSS meatotino e fesoasoani i le fa'atonutonuina o le fa'atulagaina e ala i le tu'uina atu o le axis lona tolu e fa'atulaga ai mea. Matou te fa'aogaina le fua z-index i le Bootstrap lea na mamanuina e fa'anofo lelei ai le fa'aogaina o le fa'atonuga, mea faigaluega ma popovers, modals, ma isi mea.

O nei tau maualuga e amata i se numera fa'apitoa, maualuga ma fa'apitoa e aloese ai mai fete'ena'iga. Matou te manaʻomia se seti masani o nei mea i luga oa matou vaega faʻapipiʻi-mea faigaluega, popovers, navbars, dropdowns, modals-ina ia mafai ai ona matou fetaui lelei i amioga. E leai se mafuaaga na le mafai ai ona matou faʻaaogaina 100+ poʻo 500+.

Matou te le fa'amalosia le fa'avasegaina o nei tulaga fa'aletagata; afai e te suia se tasi, atonu e te manaʻomia le suia uma.

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

Ina ia taulimaina tuaoi felavasa'i i totonu o vaega (fa'ata'ita'iga, fa'amau ma mea fa'aoga i vaega fa'aoga), matou te fa'aogaina numera tasi maualalo z-indexo le 1, 2, ma 3mo le le mafai, fa'ae'e, ma tulaga fa'agaoioia. I luga o le hover/focus/active, matou te aumaia se elemene faapitoa i luma ma se maualuga maualuga z-indexe faʻaalia ai lo latou tuaoi i luga o elemene uso.