in English

Kolore

Bootstrap-ek gure estiloak eta osagaiak gaitzen dituen kolore-sistema zabal batek onartzen du. Horrek edozein proiekturako pertsonalizazio eta hedapen zabalagoak ahalbidetzen ditu.

Orrialde honetan

Gaiaren koloreak

Kolore guztien azpimultzo bat erabiltzen dugu kolore-eskemak sortzeko kolore-paleta txikiagoa sortzeko, Sass aldagai gisa eta Sass mapa Bootstrap-en scss/_variables.scssfitxategian ere eskuragarri.

Lehen mailakoa

Bigarren mailakoa

Arrakasta

Arriskua

Abisua

Info

Argia

Iluna

Kolore horiek guztiak Sass mapa gisa daude eskuragarri $theme-colors.

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

Ikusi gure Sass maps and loops dokumentuak kolore hauek nola aldatu jakiteko.

Kolore guztiak

Bootstrap kolore guztiak Sass aldagai gisa eta Sass mapa gisa eskuragarri daude scss/_variables.scssfitxategian. Fitxategien tamaina handitzea ekiditeko, ez ditugu testu- edo atzeko planoko kolore-klaserik sortzen aldagai horietako bakoitzarentzat. Horren ordez, kolore horien azpimultzo bat aukeratzen dugu gai-paleta baterako .

Ziurtatu kontraste-erlazioak kontrolatzen dituzula koloreak pertsonalizatzen dituzun bitartean. Behean erakusten den moduan, hiru kontraste-erlazio gehitu dizkiogu kolore nagusi bakoitzari: bat laginaren uneko koloreetarako, bat zuriaren aurkakoa eta bestea beltzaren aurkakoa.

$urdina#0d6efd

$ urdina-100

$ urdina-200

$ urdina-300

$ urdina-400

$ urdina-500

$ urdina-600

$ urdina-700

$ urdina-800

$ urdina-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$ morea#6f42c1

$ morea-100

$ morea-200

$ morea-300

$ morea-400

$ morea-500

$ morea-600

$ morea-700

$ morea-800

$ morea-900

$arrosa#d63384

$ arrosa-100

$ arrosa-200

$ arrosa-300

$ arrosa-400

$ arrosa-500

$ arrosa-600

$ arrosa-700

$ arrosa-800

$ arrosa-900

$gorria#dc3545

$ gorria-100

$ gorria-200

$ gorria-300

$ gorria-400

$ gorria-500

$ gorria-600

$ gorria-700

$ gorria-800

$ gorria-900

$laranja#fd7e14

$ laranja-100

$ laranja-200

$ laranja-300

$ laranja-400

$ laranja-500

$ laranja-600

$ laranja-700

$ laranja-800

$ laranja-900

$horia#ffc107

$ horia-100

$ horia-200

$ horia-300

$ horia-400

$ horia-500

$ horia-600

$ horia-700

$ horia-800

$ horia-900

$berdea#198754

$ berdea-100

$ berdea-200

$ berdea-300

$ berdea-400

$ berdea-500

$ berdea-600

$ berdea-700

$ berdea-800

$ berdea-900

$teal#20c997

$ zertzeta-100

$ zertzeta-200

$ zertzeta-300

$ zertzeta-400

$ zertzeta-500

$ zertzeta-600

$ zertzeta-700

$ zertzeta-800

$ zertzeta-900

$zian#0dcaf0

$ zian-100

$ zian-200

$ zian-300

$ zian-400

$ zian-500

$ zian-600

$ zian-700

$ zian-800

$ zian-900

$ grisa-500#adb5bd

$ grisa-100

$ grisa-200

$ grisa-300

$ grisa-400

$ grisa-500

$ grisa-600

$ grisa-700

$ grisa-800

$ grisa-900

$beltza#000

$ zuria#fff

Sass-i buruzko oharrak

Sassek ezin du programazioz aldagairik sortu, beraz, eskuz sortu ditugu geuk tonu eta tonu bakoitzerako aldagaiak. Erdiko puntuaren balioa zehazten dugu (adibidez, $blue-500) eta kolore-funtzio pertsonalizatuak erabiltzen ditugu gure koloreak tindatzeko (argitzeko) edo itzaltzeko (iluntzeko) Sassen mix()kolore funtzioaren bidez.

Erabiltzea mix()ez da berdina lighten()eta darken()—lehenak zehaztutako kolorea zuriarekin edo beltzarekin nahasten du, bigarrenak, berriz, kolore bakoitzaren argitasunaren balioa soilik doitzen du. Emaitza kolore multzo askoz osatuagoa da, CodePen demo honetan erakusten den bezala .

Gure tint-color()eta shade-color()funtzioak mix()gure $theme-color-intervalaldagaiarekin batera erabiltzen dira, ekoizten dugun kolore misto bakoitzeko portzentaje-balio mailakatu bat zehazten duena. Ikusi scss/_functions.scsseta scss/_variables.scssfitxategiak iturburu-kode osoa ikusteko.

Kolore Sass mapak

Bootstrap-en iturburuko Sass fitxategiek hiru mapa biltzen dituzte kolore-zerrenda eta haien balio hexadezikoen gainean azkar eta erraz errepasatzen laguntzeko.

$colorsgure eskuragarri dauden oinarrizko ( 500) kolore guztiak zerrendatzen ditu
$theme-colorssemantikoki izendatzen diren gai-kolore guztiak zerrendatzen ditu (behean erakusten dira)
$graysgrisen tonu eta tonu guztiak zerrendatzen ditu

-ren barruan scss/_variables.scss, Bootstrap-en kolore-aldagaiak eta Sass mapa aurkituko dituzu. $colorsHona hemen Sass maparen adibide bat :

$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
);

Gehitu, kendu edo aldatu balioak mapan, beste osagai askotan nola erabiltzen diren eguneratzeko. Zoritxarrez, momentu honetan, osagai guztiek ez dute Sass mapa hau erabiltzen. Etorkizuneko eguneraketak hori hobetzen ahaleginduko dira. Ordura arte, planifikatu ${color}aldagaiak eta Sass mapa hau erabiltzeko.

Adibidea

Hona hemen nola erabil ditzakezun zure Sass-en:

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

Kolore eta atzeko planoko erabilgarritasun klaseak ere eskuragarri daude kolore-balioak ezartzeko coloreta background-colorerabiltzeko .500

Utilitateak sortzea

v5.1.0 bertsioan gehitu da

Bootstrap-ek ez ditu kolore-aldagai guztientzako erabilgarritasunik, baina zuk zeuk sor ditzakezu gure utilitateen APIarekincolor eta v5.1.0-n gehitutako Sass mapa hedatuak.background-color

Hasteko, ziurtatu gure funtzioak, aldagaiak, nahasketak eta utilitateak inportatu dituzula.
Erabili gure map-merge-multiple()funtzioa Sass mapa anitz azkar batzeko mapa berri batean.
Batu mapa konbinatu berri hau {color}-{level}klase-izen batekin edozein utilitate zabaltzeko.

.text-purple-500Hona hemen goiko urratsak erabiliz testu-kolorearen erabilgarritasunak sortzen dituen adibide bat (adibidez, ).

@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";

Honek erabilgarritasun berriak sortuko .text-{color}-{level}ditu kolore eta maila guztietarako. Gauza bera egin dezakezu beste edozein erabilgarritasun eta jabetzarekin ere.