Salá koleka na makambo ya ntina Salta na navigation ya docs

Bootstrap ezali soutenu na système ya couleur ya monene oyo ezo thème ba styles na ba composants na biso. Yango epesaka nzela ya kosala personnalisation mpe extension ya mobimba mingi mpo na projet nyonso.

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.

Ya liboso
Ebongiseli ya mibale
Kolonga
Likama
Likebisi
Info
Pole
Molili

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 bomati ya bonene ya ba fisyé, tosalaka te bakelasi ya makomi to ya langi ya nsima 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 blanc, mpe moko mpo na contre noir.

$bleu#0d6efd ya likambo
$bleu-100 na mbongo
$bleu-200 na mbongo
$bleu-300 na mbongo
$bleu-400 na mbongo
$bleu-500 na mbongo
$bleu-600 na mbongo
$bleu-700 na mbongo
$bleu-800 na mbongo
$bleu-900 na mbongo
$indigo#6610f2
$indigo-100 na mokili mobimba
$indigo-200 na mokili mobimba
$indigo-300 ya mbongo
$indigo-400 ya mbongo
$indigo-500 ya mbongo
$indigo-600 ya mbongo
$indigo-700 ya mbongo
$indigo-800 ya mbongo
$indigo-900 ya mbongo
$ya langi ya motane#6f42c1 oyo ezali
$violet-100 na mbongo
$violet-200 na mbongo
$violet-300 na mbongo
$violet-400 na mbongo
$violet-500 na mbongo
$violet-600 na mbongo
$violet-700 na mbongo
$violet-800 na mbongo
$violet-900 na mbongo
$rose ya langi ya rozɛ#d63384 oyo ezali
$rose-100 ya langi
$rose-200 ya langi
$rose-300 ya langi
$rose-400 ya langi
$rose-500 na mbongo
$rose-600 ya langi
$rose-700 na mbongo
$rose-800 ya langi
$rose-900 ya langi
$motane#dc3545 na kombo ya
$motane-100
$motane-200
$motane-300
$motane-400
$motane-500
$motane-600
$motane-700
$motane-800
$motane-900
$orange#fd7e14 na kombo ya
$orange-100 na mokili mobimba
$orange-200 na mbongo
$orange-300 na mbongo
$orange-400 na mbongo
$orange-500 na mbongo
$orange-600 na mbongo
$orange-700 na mbongo
$orange-800 na mbongo
$orange-900 na mbongo
$ya langi ya jaune#ffc107 na kombo ya
$ya langi ya jaune-100
$jaune-200
$ya langi ya jaune-300
$ya langi ya jaune-400
$jaune-500
$ya langi ya jaune-600
$ya langi ya jaune-700
$jaune-800
$ya langi ya jaune-900
$vert#198754 oyo ezali
$vert-100
$vert-200
$vert-300
$vert-400 ya vert
$vert-500 ya vert
$vert-600
$vert-700
$vert-800 ya vert
$vert-900 ya vert
$teal#20c997 na kombo ya
$teal-100 ya mbongo
$teal-200 ya mbongo
$teal-300 ya mbongo
$teal-400 ya mbongo
$teal-500 ya mbongo
$teal-600 ya mbongo
$teal-700 ya mbongo
$teal-800 ya mbongo
$teal-900 ya mbongo
$cyan#0dcaf0
$cyan-100 ya mbongo
$cyan-200 ya mbongo
$cyan-300 ya mbongo
$cyan-400 ya mbongo
$cyan-500 ya mbongo
$cyan-600 ya mbongo
$cyan-700 ya mbongo
$cyan-800 ya mbongo
$cyan-900 ya mbongo
$ya langi ya motane-500#adb5bd
$ya langi ya motane-100
$ya langi ya motane-200
$ya langi ya motane-300
$ya langi ya motane-400
$ya langi ya motane-500
$ya langi ya motane-600
$ya langi ya motane-700
$ya langi ya motane-800
$ya langi ya motane-900
$moindo#000
$mpɛmbɛ#fff

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 noki mpe na pete kosala boucle 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,
  "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

Ebakisami na v5.1.0

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. Mpo na kobanda, sala ete okɔtisa ba fonctions na biso, ba variables, ba mixins, mpe ba utilitaires na biso.
  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/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.