வண்ணங்கள்

வண்ணங்கள்

வண்ண பயன்பாடுகளுடன் உரையை வண்ணமயமாக்குங்கள். நீங்கள் இணைப்புகளை வண்ணமயமாக்க விரும்பினால், உதவி .link-*வகுப்புகளைப் பயன்படுத்தலாம் .:hover:focus

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

ஒளிபுகாநிலை

v5.1.0 இன் படி, CSS மாறிகளைப் பயன்படுத்தி சாஸ் மூலம் உரை வண்ணப் பயன்பாடுகள் உருவாக்கப்படுகின்றன. இது தொகுத்தல் மற்றும் மாறும் ஆல்பா வெளிப்படைத்தன்மை மாற்றங்கள் இல்லாமல் நிகழ் நேர வண்ண மாற்றங்களை அனுமதிக்கிறது.

எப்படி இது செயல்படுகிறது

எங்கள் இயல்புநிலை .text-primaryபயன்பாட்டைக் கவனியுங்கள்.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

ஆல்ஃபா வெளிப்படைத்தன்மைக்காக ( உள்ளூர் CSS மாறிக்கு நன்றி செலுத்தும் இயல்புநிலை மதிப்புடன்) எங்களின் --bs-primary(மதிப்புடன் ) CSS மாறியின் RGB பதிப்பைப் பயன்படுத்துகிறோம், மேலும் 13, 110, 253இரண்டாவது CSS மாறியை இணைத்துள்ளோம் . அதாவது நீங்கள் இப்போது பயன்படுத்தும் எந்த நேரத்திலும், உங்கள் கணக்கிடப்பட்ட மதிப்பு . ஒவ்வொரு வகுப்பிற்குள்ளும் உள்ள உள்ளூர் CSS மாறி, பரம்பரைச் சிக்கல்களைத் தவிர்க்கிறது, எனவே பயன்பாடுகளின் உள்ளமை நிகழ்வுகள் தானாகவே மாற்றியமைக்கப்பட்ட ஆல்பா வெளிப்படைத்தன்மையைக் கொண்டிருக்காது.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

உதாரணமாக

அந்த ஒளிபுகாநிலையை மாற்ற --bs-text-opacity, தனிப்பயன் பாணிகள் அல்லது இன்லைன் பாணிகள் வழியாக மேலெழுதவும்.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

அல்லது, ஏதேனும் .text-opacityபயன்பாடுகளில் இருந்து தேர்வு செய்யவும்:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

குறிப்பிட்ட

மற்றொரு தேர்வாளரின் தனித்தன்மையின் காரணமாக சில நேரங்களில் சூழ்நிலை வகுப்புகளைப் பயன்படுத்த முடியாது. சில சமயங்களில், உங்கள் உறுப்பின் உள்ளடக்கத்தை ஒரு <div>அல்லது அதற்கு மேற்பட்ட சொற்பொருள் உறுப்பில் விரும்பிய வகுப்பில் மடிப்பதற்கு போதுமான தீர்வாகும்.

சாஸ்

பின்வரும் Sass செயல்பாட்டிற்கு கூடுதலாக, வண்ணங்கள் மற்றும் பலவற்றிற்கான எங்களின் சேர்க்கப்பட்டுள்ள CSS தனிப்பயன் பண்புகள் (அக்கா CSS மாறிகள்) பற்றி படிக்கவும்.

மாறிகள்

பெரும்பாலான colorபயன்பாடுகள் எங்கள் தீம் வண்ணங்களால் உருவாக்கப்படுகின்றன, எங்கள் பொதுவான வண்ணத் தட்டு மாறிகளிலிருந்து மறுஒதுக்கீடு செய்யப்படுகின்றன.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

கிரேஸ்கேல் நிறங்களும் கிடைக்கின்றன, ஆனால் எந்தவொரு பயன்பாடுகளையும் உருவாக்க துணைக்குழு மட்டுமே பயன்படுத்தப்படுகிறது.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

வரைபடம்

தீம் வண்ணங்கள் பின்னர் ஒரு சாஸ் வரைபடத்தில் வைக்கப்படுகின்றன, எனவே எங்கள் பயன்பாடுகள், கூறு மாற்றிகள் மற்றும் பலவற்றை உருவாக்க அவற்றின் மீது லூப் செய்யலாம்.

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

கிரேஸ்கேல் நிறங்கள் சாஸ் வரைபடமாகவும் கிடைக்கின்றன. எந்தவொரு பயன்பாடுகளையும் உருவாக்க இந்த வரைபடம் பயன்படுத்தப்படவில்லை.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB வண்ணங்கள் ஒரு தனி Sass வரைபடத்தில் இருந்து உருவாக்கப்படுகின்றன:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

வண்ண ஒளிபுகாநிலைகள் அவற்றின் சொந்த வரைபடத்துடன் உருவாக்கப்படுகின்றன, அவை பயன்பாடுகள் API ஆல் பயன்படுத்தப்படுகின்றன:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

பயன்பாடுகள் API

எங்கள் பயன்பாடுகள் API இல் வண்ண பயன்பாடுகள் அறிவிக்கப்படுகின்றன scss/_utilities.scss. பயன்பாடுகள் API ஐ எவ்வாறு பயன்படுத்துவது என்பதை அறிக.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),