Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
Check
in English

Գույն և ֆոն

Սահմանեք ֆոնի գույնը հակապատկերային առաջին պլանի գույնով:

Ընդհանուր ակնարկ

Ավելացված է v5.2.0-ում

Գույնի և ֆոնի օգնականները համատեղում են մեր .text-*կոմունալ և .bg-*կոմունալ ծառայությունների հզորությունը մեկ դասում: Օգտագործելով մեր Sass ֆունկցիան, մենք ավտոմատ կերպով որոշում ենք որոշակի 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>