Llinpi

Bootstrap huk hatun llimp'i sistemawan yanapasqa kachkan chaymanta temakuna estilokunayku chaymanta componentekunayku. Kayqa aswan tukuypaq ruwayta chaymanta mast'ariyta mayqin ruwaypaqpas atichin.

Kay p'anqapi

Tema colores

Llapa llimp'ikunamanta huk huch'uy huñuta llamk'achiyku huk aswan huch'uy llimp'ikuna ruwanapaq llimp'ikuna ruwanapaq, chaymanta Sass tikraq hina chaymanta huk Sass mapa Bootstrap scss/_variables.scsswillañiqipi tarikun.

Qallariq

Secundaria

Allinmi

Manchay

Manchachiy

Info

Kanchi

Tutayasqa

Tukuy kay llimp’ikunaqa Sass mapa hinam kachkan, $theme-colors.

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

Sass mapakunaykumanta chaymanta loops docsniykumanta qhaway imayna kay llimp'ikunata tikranapaq.

Tukuy llimpikuna

Llapan Bootstrap llimp'ikuna Sass tikraq hina chaymanta huk Sass mapa scss/_variables.scsswillañiqipi kanku. Willañiqi sayayninkuna yapasqa kananpaq, mana qillqa icha qhipa llimp'i clasekunata sapa kay tikraqkunapaq ruwaykuchu. Aswanpas, kay llimp’ikunamanta huk huch’uy huñuta akllayku huk tema paletapaq .

Aswan allinta qhaway contraste ratiokunata imaynachus colorkunata ruwanki. Uraypi rikuchisqa hina, kimsa contraste ratiokuna sapa hatun llimp'ikunaman yapasqayku —huk swatch kunan llimp'ikuna kaqpaq, huk yuraq kaqwan, huktaq yana kaqwan.

$azul#0d6efd nisqa

$azul-100 nisqa

$azul-200 nisqa

$azul-300 nisqa

$azul-400 nisqa

$azul-500 nisqa

$azul-600 nisqa

$azul-700 nisqa

$azul-800 nisqa

$azul-900 nisqa

$indigo#6610f2 nisqa

$indigo-100 nisqa

$indigo-200 nisqa

$indigo-300 nisqa

$indigo-400 nisqa

$indigo-500 nisqa

$indigo-600 nisqa

$indigo-700 nisqa

$indigo-800 nisqa

$indigo-900 nisqa

$purpura#6f42c1 nisqa

$morado-100 nisqa

$morado-200 nisqa

$morado-300 nisqa

$morado-400 nisqa

$morado-500 nisqa

$morado-600 nisqa

$morado-700 nisqa

$morado-800 nisqa

$morado-900 nisqa

$rosa#d63384 nisqa

$rosa-100 nisqa

$rosa-200 nisqa

$rosa-300 nisqa

$rosa-400 nisqa

$rosa-500 nisqa

$rosa-600 nisqa

$rosa-700 nisqa

$rosa-800 nisqa

$rosa-900 nisqa

$puka#dc3545 nisqa

$puka-100

$puka-200

$puka-300

$puka-400

$puka-500

$puka-600

$puka-700

$puka-800

$puka-900

$naranja#fd7e14 nisqa

$naranja-100 nisqa

$naranja-200 nisqa

$naranja-300 nisqa

$naranja-400 nisqa

$naranja-500 nisqa

$naranja-600 nisqa

$naranja-700 nisqa

$naranja-800 nisqa

$naranja-900 nisqa

$q'illu#ffc107 nisqa

$q'illu-100

$q’illu-200

$q’illu-300

$q’illu-400

$q’illu-500

$q’illu-600

$q’illu-700

$q’illu-800

$q'illu-900

$verde#198754 nisqa

$verde-100 nisqa

$verde-200 nisqa

$verde-300 nisqa

$verde-400 nisqa

$verde-500 nisqa

$verde-600 nisqa

$verde-700 nisqa

$verde-800 nisqa

$verde-900 nisqa

$teal nisqa#20c997 nisqa

$teal-100 nisqa

$teal-200 nisqa

$teal-300 nisqa

$teal-400 nisqa

$teal-500 nisqa

$teal-600 nisqa

$teal-700 nisqa

$teal-800 nisqa

$teal-900 nisqa

$cian#0dcaf0 nisqa

$cian-100 nisqa

$cian-200 nisqa

$cian-300 nisqa

$cian-400 nisqa

$cian-500 nisqa

$cian-600 nisqa

$cian-700 nisqa

$cian-800 nisqa

$cian-900 nisqa

$gris-500 nisqa#adb5bd nisqa

$gris-100 nisqa

$gris-200 nisqa

$gris-300 nisqa

$gris-400 nisqa

$gris-500 nisqa

$gris-600 nisqa

$gris-700 nisqa

$gris-800 nisqa

$gris-900 nisqa

$yana#000 nisqa

$yuraq#fff

Notas sobre Sass

Sass mana programaticamente variables nisqakunata ruwayta atinchu, chayrayku makiwan sapa tintepaq chaymanta llantuypaq variables nisqakunata ruwarqayku ñuqayku kikiykupaq. Chawpi chanita riqsichiyku (kayhina, $blue-500) chaymanta sapanchasqa llimp'i ruwanakuna llamk'achiyku llimp'iyku tinte (k'anchay) utaq llantuypaq (tutayachiypaq) Sass mix()llimp'i ruwana kaqnintakama.

Utilizar mix()mana kaqllachu lighten()chaymanta darken()—ñawpaq kaqtaq nisqa llimp’ita yuraqwan icha yanawan chaqrun, qhipa kaqtaq sapa llimp’ip llamp’u kaynin chanillata allichan. Chay ruwayqa huk aswan hunt'asqa suite llimp'ikuna kan, kay CodePen demo kaqpi rikuchisqa hina .

Nuestro tint-color()y shade-color()funciones utilizan mix()junto a nuestra $theme-color-intervalvariable, que especifica un valor porcentaje paso para cada color producido. Huk willañiqikunata qhaway scss/_functions.scsshunt'asqa scss/_variables.scsspukyuta.

Mapas de Sass de colores

Bootstrap kaqpa pukyuta Sass willañiqikuna kimsa mapakunayuq yanapasunki usqhaylla chaymanta mana sasachu llimp'ikuna lista kaqpi chaymanta hex chanikunankupi llimp'iypi.

$colorslista llapa tarikuq base ( 500) coloresniykumanta
$theme-colorsllapa semánticamente sutichasqa tema llimp'ikunata listan (urapi rikuchisqa)
$grayslista de todos los tintes y tonos de gris

, ukhupi scss/_variables.scss, Bootstrap llimp'i tikraqkunata chaymanta Sass mapata tarinki. Kaypi huk rikch'ana $colorsSass mapamanta:

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

Mapa ukhupi chanikunata yapay, hurquy utaq tikray imayna huk achka componentekunapi llamk'achisqa kasqankuta musuqyachinaykipaq. Llakikuypaq kay pacha, mana sapa componente kay Sass mapata llamk'achin. Hamuq musuqyachiykuna kayta allinchaypaq kallpachakunqa. Chaykamaqa, planificay ${color}variables nisqakunata, kay mapa Sass nisqakunatapas llamk’achinapaq.

Qatina

Kaypi imaynatachus kaykunata Sass nisqaykipi llamk'achiyta atinki:

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

Color chaymanta qhipa yanapakuy clasekuna kankutaq llimp'i chanikuna churanapaq colorchaymanta background-colorllamk'achinapaq .500

Utilidades nisqakunata paqarichispa

v5.1.0 nisqapi yapasqa

Bootstrap mana colorchaymanta background-coloryanapakuykunata sapa llimp'i tikraqpaq churanchu, ichaqa kaykunata qam kikiyki ruwayta atikunki yanapakuyniyku API kaqwan chaymanta mast'arisqa Sass mapaykuwan v5.1.0 kaqpi yapasqa.

Qallarinapaq, ruwanayku, tikraq, mixins chaymanta yanapakuyniyku apamusqaykita qhaway.
Ruwayniykuwan llamk'achiy map-merge-multiple()achka Sass mapakunata musuq mapapi usqhaylla hukllanapaq.
Kay musuq huñusqa mapata huñuy ima yanapakuytapas huk {color}-{level}clase sutiwan mast'arinaykipaq.

Kaypi huk rikch'ana kachkan mayqinchus qillqa llimp'i yanapakuykunata ruwan (kayhina, .text-purple-500) pata ruwanakunata llamk'achispa.

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

.text-{color}-{level}Kayqa sapa llimp’ipaq, patapaq ima musuq yanapakuykunata paqarichinqa . Chaynatataq ruwayta atinki mayqin wak utilidadpaq chaymanta propiedadpaqpas.