Ba points ya pause

Makanisi ya ntina

• Ba points de rupture ezali ba blocs de construction ya conception responsive. Salelá yango mpo na kotambwisa ntango nini ebongiseli na yo ekoki kobongisama na esika moko boye ya kotala to na bonene ya aparɛyi moko boye.

• Salelá ba requêtes ya media mpo na ko architecter CSS na yo na point de rupture. Ba requêtes ya media ezali fonctionnalité ya CSS oyo e permettre yo o appliquer conditionnellement ba styles basé na ensemble ya ba paramètres ya navigateur na système d'exploitation. Tosalelaka mingi min-widthna mituna na biso ya media.

• Mobile liboso, conception responsive ezali but. CSS ya Bootstrap ezali na mokano ya kosalela bare minimum ya ba styles mpo na kosala ete layout esalaka na point de rupture ya moke, mpe na nsima ba couches na ba styles mpo na kobongisa design wana mpo na ba appareils ya minene. Yango ebongisi CSS na yo malamu, ebongisaka ntango ya kosala rendu, mpe epesaka mayele malamu mpo na bapaya na yo.

Ba points de rupture oyo ezali

Bootstrap ezali na ba points de rupture par défaut motoba, tango mosusu babengaka yango ba niveaux ya grille , mpo na kotonga na ndenge ya koyanola. Ba points de rupture oyo ekoki kozala personnalisé soki ozali kosalela ba fichiers na biso ya source Sass.

Point de rupture moko na moko eponami mpo na kosimba malamu ba récipients oyo ba largeurs na yango ezali ba multiples ya 12. Ba points de rupture ezali mpe momonisi ya sous-ensemble ya ba taille ya appareil commune mpe ba dimensions ya port de vue —ba cibler spécifiquement te cas to appareil nionso ya usage. Na esika na yango, ba gammes epesaka moboko makasi mpe ya ntango nyonso mpo na kotonga likoló na yango mpo na pene na aparɛyi nyonso.

Ba points de rupture oyo ezali personnalisable via Sass —okokuta yango na carte ya Sass na feuille de style na biso _variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Mpo na koyeba makambo mingi mpe bandakisa ya ndenge ya kobongisa ba cartes mpe ba variables na biso ya Sass, tala eteni ya Sass ya mikanda ya Grid .

Mituna ya bapanzi sango

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.

Min-bonene ya monene

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.

// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

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

Ba mixins oyo ya Sass ebongolami na CSS na biso oyo esangisi na kosalelaka ba valeurs oyo esakolami na ba variables na biso ya Sass. Na ndakisa:

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

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-largeur ya monene

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

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Ba mixins wana ezuaka ba points de rupture wana oyo esakolami, elongolaka .02pxyango, mpe esalela yango lokola ba max-widthvaleurs na biso. Na ndakisa:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Point de rupture moko

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.

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

Ndakisa @include media-breakpoint-only(md) { ... }ekosala ete :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Kati na ba points de rupture

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

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

Oyo esali ete:

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