Colors

colorBi çend dersên karanîna rengan re wateyê vebigihînin . Piştgiriya ji bo girêdanên şêwazê bi dewletên hover re jî vedihewîne.

Li ser vê rûpelê

Colors

Bi karûbarên rengan re nivîsê rengîn bikin. Heke hûn dixwazin zencîreyan rengîn bikin, hûn dikarin .link-*çînên alîkar ên ku hene :hoverû :focusdewletan bikar bînin.

.text-sereke

.text-secondary

.text-serkeftin

.text-xeter

.text-hişyarî

.text-info

.text-ronahî

.text-tarî

.text-beden

.text-bêdeng kirin

.text-spî

.text-reş-50

.text-spî-50

<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>

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Taybetmendî

Carinan ji ber taybetmendiya hilbijarkek din dersên kontekstê nikarin werin sepandin. Di hin rewşan de, çareseriyek têr ev e ku hûn naveroka hêmana xwe di hêmanek <div>an bêtir semantîkî de bi çîna xwestî ve bipêçin.

Sass

Ji bilî fonksiyonên Sass-ê yên jêrîn, ji bo rengan û hêj bêtir bixwînin li ser taybetmendiyên xwerû yên CSS-ê yên tevlîhev (ango guhêrbarên CSS-ê) bixwînin.

Variables

Piraniya colorkarûbar ji hêla rengên mijara me ve têne hilberandin, ku ji guhêrbarên paleta rengên me yên gelemperî têne veguheztin.

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

Rengên gewr jî hene, lê tenê binkeyek tê bikar anîn da ku her amûrek çêbikin.

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

Qert

Dûv re rengên mijarê di nexşeyek Sass de têne danîn da ku em li ser wan bigerin da ku karûbarên xwe, guhezkerên pêkhateyan, û hêj bêtir biafirînin.

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

Rengên gewr jî wekî nexşeyek Sass peyda dibin. Ev nexşe ji bo hilberandina tu karûbaran nayê bikar anîn.

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

Utilities API

Karûbarên rengîn di API-ya karûbarên me de di nav de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),