Botali ya mozindo

Ba composants mpe ba options mpo na ko lancer projet na yo ya Bootstrap, na kati na yango ba conteneurs ya enveloppement, système ya grille ya makasi, objet ya média flexible, mpe ba classes ya utilitaires oyo ezo répondre.

Ba récipients

Ba conteneurs ezali élément ya layout ya base mingi na Bootstrap mpe esengeli tango ya kosalela système na biso ya grille par défaut . Ba récipients esalelamaka mpo na kokanga, ko pad, mpe (ntango mosusu) ko centrer makambo oyo ezali na kati na yango. Atako ba conteneurs ekoki kozala na kati, mingi ya ba layouts esengaka te conteneur oyo ekangami.

Bootstrap eza na ba récipients misato ekeseni:

• .container, oyo etyaka a max-widthna esika mokomoko ya kobuka oyo ezali koyanola
• .container-fluid, oyo ezali width: 100%na bisika nyonso ya kobukana
• .container-{breakpoint}, oyo ezali width: 100%tii na esika oyo emonisami

Tableau oyo ezali awa na se ezali kolakisa ndenge nini conteneur moko na moko max-widthekokani na oyo ya ebandeli .containermpe .container-fluidna kati ya esika moko na moko ya kobukana.

Tala bango na misala mpe kokanisá bango na ndakisa na biso ya Grille .

Nyonso-na-moko

Classe na biso ya défaut .containerezali réponse, conteneur ya largeur fixe, elingi koloba ba max-widthchangements na yango na point de rupture moko na moko.

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

Mai

Salelá .container-fluidmpo na eloko oyo ezali na bonene mobimba, oyo ezali na bonene mobimba ya esika ya kotala.

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

Koyanola

Ba conteneurs oyo ezo répondre eza ya sika na Bootstrap v4.4. Ba permettre yo o préciser classe oyo ezali na largeur ya 100% tii tango point de rupture oyo elakisami ekokoma, sima na yango tosalelaka max-widths pona moko na moko ya ba points de rupture ya likolo. Ndakisa, .container-smezali 100% ya bonene mpo na kobanda kino smesika ya bopanzani ekokoma, esika ekomata na md, lg, mpe 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>

Ba points de rupture oyo ezo répondre

Lokola Bootstrap esalemi mpo na kozala mobile liboso, tosalelaka mwa mituna ya media mpo na kosala ba points de rupture ya mayele mpo na ba layouts mpe ba interfaces na biso. Ba points de rupture oyo ezali mingi mingi basé na ba largeurs minimum ya port de vue mpe e permettre biso to échelle ba éléments tango port de vue ezali ko changer.

Bootstrap esalela libosoliboso ba intervalles ya requête ya media oyo elandi —to ba points de rupture —na ba fichiers na biso ya source Sass mpo na layout na biso, système ya grille, mpe ba composants.

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

Lokola tokomaka CSS ya source na biso na Sass, ba requêtes na biso nionso ya ba médias ezali na nzela ya ba mixins ya 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;
  }
}

Tosalelaka tango mosusu ba queries ya media oyo ekendaka na direction mosusu (taille ya écran oyo epesami to ya moke ):

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

Encore une fois, ba requêtes oyo ya ba médias ezali pe disponible via ba mixins ya Sass:

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

Ezali mpe na ba requêtes ya media mpe ba mixins mpo na ko cibler segment moko ya ba taille ya écran na kosalelaka ba largeurs ya point de rupture minimum mpe maximum.

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

Ba requêtes oyo ya ba médias ezali pe na nzela ya ba mixins ya Sass:

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

Ndenge moko mpe, mituna ya media ekoki kozala na bonene ya ba points de rupture ebele:

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

Mixin ya Sass pona ko cibler gamme ya taille ya écran moko ekozala:

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

Index ya Z

Ba composants ya Bootstrap ebele basalelaka z-index, propriété CSS oyo esalisaka na contrôle ya layout na kopesaka axe ya misato pona ko organiser contenus. Tosalelaka échelle ya z-index par défaut na Bootstrap oyo esalemi mpo na ko coucher malamu navigation, ba toli ya bisaleli mpe ba popovers, ba modals, mpe mingi mosusu.

Ba valeurs oyo ya likolo ebandi na nombre arbitraire, ya likolo pe spécifique suffisamment pona ko éviter na ndenge ya malamu ba conflits. Tozali na mposa ya ensemble standard ya oyo na kati ya ba composants na biso ya couché —ba tolips ya bisaleli, ba popovers, ba navbars, ba dropdowns, ba modals —mpo ete tokoka kozala na boyokani na ndenge ya malamu na bizaleli. Ezali na ntina moko te oyo tokokaki kosalela 100+ to 500+ te.

Tolendisaka te kosala personnalisation ya ba valeurs individuelles wana; soki obongoli moko, mbala mosusu osengeli kobongola yango nyonso.

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

Mpo na kosimba bandelo oyo ezali kozipa na kati ya biloko (ndakisa, ba boutons mpe ba entrées na ba groupes ya entrée), tosalelaka ba z-indexvaleurs ya chiffre moko ya nse ya 1, 2, mpe 3mpo na ba états par défaut, hover, mpe active. Na hover/focus/active, to memaka élément moko particulier na esika ya liboso na z-indexvaleur ya likolo pona kolakisa frontière na bango likolo ya ba éléments frères.