Vaaiga lautele

Vaega ma filifiliga mo le tuʻuina atu o lau poloketi Bootstrap, e aofia ai pusa afifi, se faiga faʻasologa 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 o le faʻaogaina . O koneteina e fa'aoga e fa'amau ai, pad, ma (o nisi taimi) fa'atotonu mea i totonu. E ui e mafai ona fa'aputuina pusa, ae o le tele o fa'atulagaga e le mana'omia ai se fa'aputuga.

Bootstrap e sau ma pusa eseese e tolu:

• .container, lea e setiina a max-widthi vaega ta'itasi tali
• .container-fluid, lea e width: 100%i'u uma lava malepe
• .container-{breakpoint}, lea width: 100%se'ia o'o i le mea e momotu ai

O le siata o lo'o i lalo o lo'o fa'aalia ai le max-widthfa'atusaina o atigipusa ta'itasi i le mea muamua .containerma .container-fluidle va'aiga ta'itasi.

Vaʻai i latou i faʻatinoga ma faʻatusatusa i latou i la matou Grid faʻataʻitaʻiga .

Atoa-i-tasi

O le matou vasega fa'aletonu .containero se atigipusa tali, fa'amau-lautele, o lona uiga o max-widthsuiga i nofoaga ta'itasi.

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

Suavai

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

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

Talia

O pusa tali e fou i Bootstrap v4.4. Latou te faʻatagaina oe e faʻamaonia se vasega e 100% lautele seʻia oʻo i le vaeluaga faʻapitoa, a maeʻa ona matou faʻaoga max-widths mo vaega taʻitasi maualuga. Mo se fa'ata'ita'iga, .container-sme 100% le lautele e amata ai se'ia o'o i le smva'aiga, lea o le a fa'ateleina i le md, lg, ma le 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>

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

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:

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

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

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 faʻafefe / taulaʻi / malosi, matou te aumaia se elemene faʻapitoa i luma ma se maualuga maualuga z-indexe faʻaalia ai lo latou tuaoi i luga o elemene tei.