Launi & bango

Saita launi na bango tare da sabanin launi na gaba.

A wannan shafi

Dubawa

An ƙara a cikin v5.2.0

Mataimakan launi da bango suna haɗa ƙarfin .text-*kayan aikin mu da .bg-*abubuwan amfani a cikin aji ɗaya. Yin amfani da aikin Sass ɗinmu color-contrast(), muna ƙayyade bambanci ta atomatik colordon takamaiman background-color.

A kula! A halin yanzu babu tallafi don aikin ɗan asalin CSS color-contrast, don haka muna amfani da namu ta hanyar Sass. Wannan yana nufin keɓance launukan jigon mu ta hanyar masu canji na CSS na iya haifar da al'amuran bambancin launi tare da waɗannan abubuwan amfani.

Na farko tare da bambancin launi

Na biyu tare da bambancin launi

Nasara tare da bambancin launi

Haɗari tare da bambancin launi

Gargaɗi tare da bambancin launi

Bayani tare da bambancin launi

Haske tare da bambancin launi

Dark tare da bambancin launi

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

Tare da sassan

Yi amfani da su a maimakon haɗaka .text-*da .bg-*azuzuwan, kamar kan bajoji :

Firamare Bayani

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

Ko a kan katunan :

Kai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

Kai

Wasu rubutun misali mai sauri don ginawa akan taken katin da kuma samar da mafi yawan abubuwan da ke cikin katin.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>