Төс һәм фон

Контрастлы алгы төс белән фон төсен куегыз.

Бу биттә

Гомуми күзәтү

V5.2.0 өстәлде

Төс һәм фон ярдәмчеләре безнең коммуналь хезмәтләрнең көчен бер .text-*сыйныфта берләштерәләр . Sass функциясен кулланып , без билгеле бер контрастны автоматик рәвештә билгелибез ..bg-*color-contrast()colorbackground-color

Идарә итә! Хәзерге вакытта CSS- color-contrastфункциясенә ярдәм юк, шуңа күрә без Sass аша үзебезнекен кулланабыз. Димәк, CSS үзгәрүчәннәре аша безнең тема төсләрен көйләү бу коммуналь хезмәтләр белән төс контрастына китерергә мөмкин.

Контраст төс белән башлангыч

Контраст төс белән икенчел

Контраст төс белән уңыш

Контраст төс белән куркыныч

Контраст төс белән кисәтү

Контраст төс белән мәгълүмат

Контраст төс белән яктылык

Контраст төс белән караңгы

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>

Компонентлар белән

Аларны берләштерелгән .text-*һәм .bg-*класслар урынына кулланыгыз, бейджлардагы кебек :

Башлангыч Мәгълүмат

html

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

Яисә карточкаларда :

Башлам

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

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>