Langi

Ba couleurs ya thème

Tosalelaka sous-ensemble ya ba couleurs nionso pona kosala palette ya couleur ya moke pona ko générer ba schemes ya couleur, oyo ezali pe lokola ba variables ya Sass pe carte ya Sass na scss/_variables.scssfichier ya Bootstrap.

Ba couleurs oyo nionso ezali lokola carte ya Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Tala ba cartes na biso ya Sass na ba docs ya ba boucles pona ndenge ya ko modifier ba couleurs oyo.

Ba couleurs nionso

Ba couleurs nionso ya Bootstrap ezali lokola ba variables ya Sass na carte ya Sass na scss/_variables.scssfichier. Mpo na koboya bonene ya ba fichiers oyo ebakisami, tosalaka te ba classes ya couleur ya texte to ya fond mpo na moko na moko ya ba variables oyo. Na esika ya kosala bongo, toponaka mwa ndambo ya balangi yango mpo na palette moko ya motó ya likambo .

Bozala sûr ya ko surveiller ba rapports ya contraste tango bozali ko personnaliser ba couleurs. Ndenge emonisami awa na nse, tobakisi ba rapports misato ya bokeseni na moko na moko ya balangi ya minene —moko mpo na balangi ya lelo ya swatch, moko mpo na contre ya pembe, mpe moko mpo na contre noir.

Banote na ntina na Sass

Sass ekoki ko produire programmatiquement ba variables te, yango wana tosalaki manuellement ba variables pona teinture nionso na ombre biso moko. Tolakisaka valeur ya point milieu (par exemple, $blue-500) pe tosalelaka ba fonctions ya couleur personnalisée pona ko teindre (ko éclaircir) to ko shader (ko noir) ba couleurs na biso via mix()fonction ya couleur ya Sass.

Kosalela mix()ezali ndenge moko te na lighten()mpe darken()—oyo ya liboso esangisaka langi oyo emonisami na mpɛmbɛ to moindo, nzokande oyo ya nsuka ebongisaka kaka motuya ya pɛpɛlɛ ya langi mokomoko. Résultat ezali suite ya ba couleurs ya mobimba mingi koleka, ndenge elakisami na démonstration oyo ya CodePen .

Ba fonctions na biso tint-color()mpe shade-color()esalelaka mix()pembeni ya $theme-color-intervalvariable na biso, oyo elakisaka valeur ya pourcentage ya ba étapes mpo na couleur moko na moko ya mélangée oyo tobimisaka. Tala ba fisyé scss/_functions.scssmpe scss/_variables.scssmpo na koyeba code source mobimba.

Ba cartes ya Sass ya couleur

Ba fichiers Sass ya source ya Bootstrap ezali na ba cartes misato mpo na kosalisa yo osala boucle noki mpe na pete likolo ya liste ya ba couleurs mpe ba valeurs hex na yango.

• $colorsezali na liste ya ba couleurs na biso nionso ya base ( 500) oyo ezali
• $theme-colorsezali na liste ya balangi nyonso ya motó ya likambo oyo ezali na nkombo na ndenge ya sémantique (elakisami awa na nse)
• $graysezali na liste ya ba teintures mpe ba nuances nionso ya gris

Na kati scss/_variables.scssya , okokuta ba variables ya couleur ya Bootstrap na carte ya Sass. Tala ndakisa ya $colorskarte ya Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Bakisa, longola, to bongisa ba valeurs na kati ya carte mpo na ko actualiser ndenge nini esalelamaka na ba composants misusu ebele. Malheureusement na moment oyo, composant nionso te e utiliser carte oyo ya Sass. Ba mises à jour oyo ekoya ekosala makasi mpo na kobongisa likambo oyo. Kino tango wana, sala plan ya kosalela ba ${color}variables na carte oyo ya Sass.

Ndakisa

Tala ndenge okoki kosalela oyo na Sass na yo:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Ba classes ya utilité ya couleur na fond ezali pe pona ko setting colorpe background-colorkosalela ba 500valeurs ya couleur.

Kosala ba utilités

Bootstrap ezali na te colormpe background-colorba utilitaires mpo na variable ya couleur nionso, kasi okoki kobimisa oyo yo moko na API na biso ya utilitaires mpe ba cartes na biso ya Sass oyo epanzani oyo ebakisami na v5.1.0.

1. Pona kobanda, sala que o importer ba fonctions na biso, ba variables, ba mixins, na ba utilitaires.
2. Salelá map-merge-multiple()mosala na biso mpo na kosangisa nokinoki bakarte mingi ya Sass esika moko na karte ya sika.
3. Sangisa carte oyo ya sika oyo esangisami mpo na koyeisa monene utilitaire nionso na {color}-{level}kombo ya classe.

Tala ndakisa oyo ebimisaka ba utilitaires ya couleur ya texte (par exemple, .text-purple-500) na kosalelaka ba étapes oyo ezali likolo.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Yango ekobimisa ba .text-{color}-{level}utilitaires ya sika mpo na couleur mpe niveau nionso. Okoki kosala mpe bongo mpo na utilité mpe biloko mosusu nyonso lokola.