in English

Kulur

Bootstrap huwa appoġġjat minn sistema estensiva tal-kulur li tissemma l-istili u l-komponenti tagħna. Dan jippermetti customizzazzjoni u estensjoni aktar komprensiva għal kwalunkwe proġett.

Fuq din il-paġna

Kuluri tat-tema

Aħna nużaw subsett tal-kuluri kollha biex noħolqu paletta tal-kuluri iżgħar għall-ġenerazzjoni ta 'skemi ta' kuluri, disponibbli wkoll bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl ta 'Bootstrap.

Primarja

Sekondarja

Suċċess

Periklu

Twissija

Info

Dawl

Dlam

Dawn il-kuluri kollha huma disponibbli bħala mappa Sass $theme-colors,.

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

Iċċekkja l -mapep u l-loops tagħna ta’ Sass għal kif timmodifika dawn il-kuluri.

Kuluri kollha

Il-kuluri kollha tal-Bootstrap huma disponibbli bħala varjabbli Sass u mappa Sass fil- scss/_variables.scssfajl. Biex nevitaw iż-żieda fid-daqsijiet tal-fajls, aħna ma noħolqux klassijiet tal-kulur tat-test jew tal-isfond għal kull waħda minn dawn il-varjabbli. Minflok, nagħżlu subsett ta 'dawn il-kuluri għal paletta ta' temi .

Kun żgur li tissorvelja l-proporzjonijiet tal-kuntrast hekk kif tippersonalizza l-kuluri. Kif muri hawn taħt, żidna tliet proporzjonijiet ta’ kuntrast għal kull wieħed mill-kuluri ewlenin—wieħed għall-kuluri attwali tal-kampjun, wieħed kontra l-abjad, u wieħed kontra l-iswed.

$blu#0d6efd

$ blu-100

$ blu-200

$ blu-300

$ blu-400

$ blu-500

$ blu-600

$ blu-700

$ blu-800

$ blu-900

$indigo#6610f2

$indigo-100

$indigo-200

$indigo-300

$indigo-400

$indigo-500

$indigo-600

$indigo-700

$indigo-800

$indigo-900

$vjola#6f42c1

$ vjola-100

$ vjola-200

$ vjola-300

$ vjola-400

$ vjola-500

$ vjola-600

$vjola-700

$ vjola-800

$vjola-900

$roża#d63384

$roża-100

$roża-200

$roża-300

$roża-400

$roża-500

$roża-600

$roża-700

$roża-800

$roża-900

$aħmar#dc3545

$ aħmar-100

$ aħmar-200

$ aħmar-300

$ aħmar-400

$ aħmar-500

$ aħmar-600

$ aħmar-700

$ aħmar-800

$ aħmar-900

$oranġjo#fd7e14

$ oranġjo-100

$ oranġjo-200

$ oranġjo-300

$ oranġjo-400

$ oranġjo-500

$ oranġjo-600

$ oranġjo-700

$ oranġjo-800

$ oranġjo-900

$isfar#ffc107

$isfar-100

$isfar-200

$isfar-300

$isfar-400

$isfar-500

$isfar-600

$isfar-700

$isfar-800

$isfar-900

$aħdar#198754

$ aħdar-100

$ aħdar-200

$ aħdar-300

$ aħdar-400

$ aħdar-500

$ aħdar-600

$ aħdar-700

$ aħdar-800

$ aħdar-900

$teal#20c997

$ teal-100

$teal-200

$ teal-300

$ teal-400

$ teal-500

$ teal-600

$ teal-700

$ teal-800

$ teal-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$ griż-500#adb5bd

$ griż-100

$ griż-200

$ griż-300

$ griż-400

$ griż-500

$ griż-600

$ griż-700

$ griż-800

$ griż-900

$iswed#000

$abjad#fff

Noti dwar Sass

Sass ma jistax jiġġenera varjabbli b'mod programmatiku, għalhekk ħloqna manwalment varjabbli għal kull lewn u dell lilna nfusna. Aħna nispeċifikaw il-valur tal-punt tan-nofs (eż., $blue-500) u nużaw funzjonijiet tal-kulur tad-dwana biex intewnu (itħaffef) jew tilfu (jiskuraw) il-kuluri tagħna permezz tal mix()-funzjoni tal-kulur ta 'Sass.

L- użu mix()mhuwiex l-istess bħal lighten()u darken()—tal-ewwel iħallat il-kulur speċifikat bl-abjad jew bl-iswed, filwaqt li l-aħħar jaġġusta biss il-valur tad-dawl ta 'kull kulur. Ir-riżultat huwa sett ta 'kuluri ħafna aktar komplut, kif muri f'din id-demo CodePen .

Il-funzjonijiet tagħna tint-color()u shade-color()l-użu mix()flimkien mal- $theme-color-intervalvarjabbli tagħna, li jispeċifika valur perċentwali imkabbar għal kull kulur imħallat li nipproduċu. Ara l- scss/_functions.scssu scss/_variables.scssfajls għall-kodiċi tas-sors sħiħ.

Mapep tal-Kulur Sass

Is-sors tal-fajls Sass ta' Bootstrap jinkludu tliet mapep biex jgħinuk tgħaddi malajr u faċilment fuq lista ta' kuluri u l-valuri hex tagħhom.

$colorstelenka l- 500kuluri bażi ( ) disponibbli kollha tagħna
$theme-colorstelenka l-kuluri kollha tat-tema bl-isem semantika (li jidhru hawn taħt)
$graystelenka l-lewn u l-ilwien kollha tal-griż

Fi ħdan scss/_variables.scss, issib il-varjabbli tal-kulur ta' Bootstrap u l-mappa ta' Sass. Hawn eżempju tal- $colorsmappa 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
);

Żid, neħħi jew immodifika valuri fil-mappa biex taġġorna kif jintużaw f'ħafna komponenti oħra. Sfortunatament f'dan iż-żmien, mhux kull komponent juża din il-mappa Sass. Aġġornamenti futuri se jagħmlu ħilithom biex itejbu dan. Sa dakinhar, ippjana li tagħmel użu mill- ${color}varjabbli u din il-mappa Sass.

Eżempju

Hawn kif tista' tuża dawn fis-Sass tiegħek:

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

Il -klassijiet tal-utilità tal- kulur u l- isfondcolor huma wkoll disponibbli għall-issettjar u background-colorl-użu tal- 500valuri tal-kulur.