ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

වර්ණ

Bootstrap අපගේ මෝස්තර සහ සංරචක තේමා කරන පුළුල් වර්ණ පද්ධතියකින් සහය දක්වයි. මෙය ඕනෑම ව්‍යාපෘතියක් සඳහා වඩාත් විස්තීරණ අභිරුචිකරණය සහ දිගුව සක්‍රීය කරයි.

මෙම පිටුවේ

තේමා වර්ණ

scss/_variables.scssබූට්ස්ට්‍රැප් ගොනුවේ Sass විචල්‍යයන් සහ Sass සිතියමක් ලෙස ද ලබා ගත හැකි, වර්ණ පටිපාටි ජනනය කිරීම සඳහා කුඩා වර්ණ මාලාවක් සෑදීමට අපි සියලු වර්ණවල උප කුලකයක් භාවිතා කරමු .

ප්රාථමික
ද්විතියික
සාර්ථකත්වය
අනතුර
අවවාදයයි
තොරතුරු
ආලෝකය
අඳුරු

මෙම සියලු වර්ණ Sass සිතියමක් ලෙස ලබා ගත හැකිය $theme-colors.

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

මෙම වර්ණ වෙනස් කරන්නේ කෙසේද යන්න සඳහා අපගේ Sass සිතියම් සහ ලූප ලේඛන පරීක්ෂා කරන්න .

සියලු වර්ණ

සියලුම Bootstrap වර්ණ Sass විචල්‍යයන් ලෙස සහ scss/_variables.scssගොනුවේ Sass සිතියමක් ලෙස ලබා ගත හැක. ගොනු ප්‍රමාණය වැඩි වීම වළක්වා ගැනීම සඳහා, අපි මෙම එක් එක් විචල්‍යයන් සඳහා පෙළ හෝ පසුබිම් වර්ණ පන්ති සාදන්නේ නැත. ඒ වෙනුවට, අපි තේමා තලයක් සඳහා මෙම වර්ණවල උප කුලකයක් තෝරා ගනිමු .

ඔබ වර්ණ අභිරුචිකරණය කරන විට ප්‍රතිවිරුද්ධ අනුපාත නිරීක්ෂණය කිරීමට වග බලා ගන්න. පහත පෙන්වා ඇති පරිදි, අපි එක් එක් ප්‍රධාන වර්ණවලට ප්‍රතිවිරුද්ධ අනුපාත තුනක් එකතු කර ඇත-එකක් swach හි වත්මන් වර්ණ සඳහා, එකක් සුදුට එරෙහිව සහ එකක් කළු සඳහා.

$නිල්#0d6efd
$නිල්-100
$නිල්-200
$නිල්-300
$නිල්-400
$නිල්-500
$නිල්-600
$නිල්-700
$නිල්-800
$නිල්-900
$ඉන්ඩිගෝ#6610f2
$ඉන්ඩිගෝ-100
$ඉන්ඩිගෝ-200
$ඉන්ඩිගෝ-300
$ඉන්ඩිගෝ-400
$ඉන්ඩිගෝ-500
$ඉන්ඩිගෝ-600
$ඉන්ඩිගෝ-700
$ඉන්ඩිගෝ-800
$ඉන්ඩිගෝ-900
$දම් පාට#6f42c1
$දම්-100
$දම්-200
$දම්-300
$දම්-400
$දම්-500
$දම්-600
$දම්-700
$දම්-800
$දම්-900
$රෝස#d63384
$රෝස-100
$රෝස-200
$රෝස-300
$රෝස-400
$රෝස-500
$රෝස-600
$රෝස-700
$රෝස-800
$රෝස-900
$රතු#dc3545
$රතු-100
$රතු-200
$රතු-300
ඩොලර් රතු-400
$රතු-500
ඩොලර් රතු-600
ඩොලර් රතු-700
ඩොලර් රතු-800
$රතු-900
$තැඹිලි#fd7e14
$තැඹිලි-100
$තැඹිලි-200
$තැඹිලි-300
$තැඹිලි-400
$තැඹිලි-500
$තැඹිලි-600
$තැඹිලි-700
$තැඹිලි-800
$තැඹිලි-900
$කහ#ffc107
$කහ-100
$කහ-200
$කහ-300
$කහ-400
$කහ-500
$කහ-600
$කහ-700
$කහ-800
$කහ-900
$හරිත#198754
$හරිත-100
$හරිත-200
$හරිත-300
$හරිත-400
$හරිත-500
$හරිත-600
$හරිත-700
$හරිත-800
$හරිත-900
$teal#20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$සයන්#0dcaf0
$සයන්-100
$සයන්-200
$සයන්-300
$සයන්-400
$සයන්-500
$සයන්-600
$සයන්-700
$සයන්-800
$සයන්-900
$අළු-500#adb5bd
$අළු-100
$අළු-200
$ අළු-300
$අළු-400
$අළු-500
$ අළු-600
$ අළු-700
$ අළු-800
$ අළු-900
$කළු#000
$සුදු#fff

Sass පිළිබඳ සටහන්

Sass හට ක්‍රමලේඛනගතව විචල්‍ය උත්පාදනය කළ නොහැක, එබැවින් අපි සෑම තින්ක් සහ සෙවනක් සඳහාම අතින් විචල්‍ය නිර්මාණය කළෙමු. අපි මධ්‍ය ලක්ෂ්‍ය අගය (උදා, $blue-500) සඳහන් කරන අතර Sass හි වර්ණ ශ්‍රිතය හරහා අපගේ වර්ණ ටින්ට් කිරීමට (ආලෝක කිරීමට) හෝ සෙවනට (අඳුරු කිරීමට) අභිරුචි වර්ණ ශ්‍රිත භාවිත කරන්නෙමු mix().

භාවිතා mix()කිරීම සමාන නොවේ lighten()සහ darken()—පළමු වර්ණය සුදු හෝ කළු සමඟ මිශ්‍ර කරයි, දෙවැන්න එක් එක් වර්ණයේ සැහැල්ලු අගය පමණක් සකස් කරයි. මෙම CodePen demo හි පෙන්වා ඇති පරිදි ප්‍රතිඵලය වඩාත් සම්පූර්ණ වර්ණ කට්ටලයකි .

අපගේ tint-color()සහ shade-color()ශ්‍රිතයන් mix()අපගේ $theme-color-intervalවිචල්‍යය සමඟ භාවිතා කරයි, එය අප නිපදවන එක් එක් මිශ්‍ර වර්ණය සඳහා පියවරෙන් පියවර ප්‍රතිශත අගයක් නියම කරයි. scss/_functions.scssසම්පූර්ණ මූල කේතය සඳහා සහ scss/_variables.scssගොනු බලන්න .

වර්ණ සාස් සිතියම්

Bootstrap හි මූලාශ්‍ර Sass ගොනු වල ඔබට ඉක්මනින් සහ පහසුවෙන් වර්ණ ලැයිස්තුවක් සහ ඒවායේ හෙක්ස් අගයන් ලූප් කිරීමට සිතියම් තුනක් ඇතුළත් වේ.

  • $colorsඅපගේ පවතින සියලුම මූලික ( 500) වර්ණ ලැයිස්තුගත කරයි
  • $theme-colorsසියලු අර්ථකථන ලෙස නම් කරන ලද තේමා වර්ණ ලැයිස්තුගත කරයි (පහත පෙන්වා ඇත)
  • $graysසියලුම තින්ක් සහ අළු වර්ණ ලැයිස්තුගත කරයි

ඇතුළත scss/_variables.scss, ඔබට Bootstrap හි වර්ණ විචල්‍යයන් සහ Sass සිතියම සොයා ගත හැක. $colorsමෙන්න 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
);

වෙනත් බොහෝ සංරචකවල ඒවා භාවිතා කරන ආකාරය යාවත්කාලීන කිරීමට සිතියම තුළ අගයන් එක් කරන්න, ඉවත් කරන්න, හෝ වෙනස් කරන්න. අවාසනාවන්ත ලෙස මෙම අවස්ථාවේදී, සෑම සංරචකයක්ම මෙම Sass සිතියම භාවිතා නොකරයි. අනාගත යාවත්කාලීනයන් මෙය වැඩිදියුණු කිරීමට උත්සාහ කරනු ඇත. එතෙක්, ${color}විචල්‍යයන් සහ මෙම Sass සිතියම භාවිතා කිරීමට සැලසුම් කරන්න.

උදාහරණයක්

මෙන්න ඔබට ඔබේ Sass තුළ මේවා භාවිතා කළ හැකි ආකාරය:

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

වර්ණ අගයන් සැකසීම සහ භාවිතා කිරීම සඳහා වර්ණ සහ පසුබිම් උපයෝගිතා පන්ති ද පවතී .colorbackground-color500

උපයෝගිතා උත්පාදනය කිරීම

v5.1.0 හි එකතු කරන ලදී

colorBootstrap හි සෑම වර්ණ විචල්‍යයක් සඳහාම සහ උපයෝගිතා ඇතුළත් නොවේ background-color, නමුත් ඔබට මේවා අපගේ උපයෝගිතා API සහ v5.1.0 හි එක් කරන ලද අපගේ දීර්ඝ Sass සිතියම් සමඟින් ඔබම ජනනය කළ හැක.

  1. ආරම්භ කිරීමට, ඔබ අපගේ කාර්යයන්, විචල්‍යයන්, මිශ්‍රණ සහ උපයෝගිතා ආයාත කර ඇති බව සහතික කර ගන්න.
  2. map-merge-multiple()නව සිතියමක් තුළ බහු Sass සිතියම් ඉක්මනින් ඒකාබද්ධ කිරීමට අපගේ කාර්යය භාවිතා කරන්න .
  3. {color}-{level}පන්ති නාමයක් සමඟ ඕනෑම උපයෝගීතාවයක් දිගු කිරීමට මෙම නව ඒකාබද්ධ සිතියම ඒකාබද්ධ කරන්න .

.text-purple-500ඉහත පියවර භාවිතයෙන් පෙළ වර්ණ උපයෝගිතා (උදා, ) ජනනය කරන උදාහරණයක් මෙන්න .

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

.text-{color}-{level}මෙය සෑම වර්ණයක් සහ මට්ටමක් සඳහාම නව උපයෝගිතා උත්පාදනය කරනු ඇත . ඔබට වෙනත් ඕනෑම උපයෝගිතා සහ දේපල සඳහාද එසේ කළ හැකිය.