Botali ya mozindo

Ba composants mpe ba options mpo na ko lancer projet na yo ya Bootstrap, na kati na yango ba conteneurs ya enveloppe, 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 . Pona kati na récipient oyo ezo répondre, ya largeur fixe (elingi koloba ba max-widthchangements na yango na point de rupture moko na moko) to na largeur ya fluide (elingi koloba eza 100%largeur tango nionso).

Atako ba conteneurs ekoki kozala na kati, mingi ya ba layouts esengaka te conteneur oyo ekangami.

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

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

<div class="container-fluid">
  ...
</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.