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

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

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