in English

Ფერები

გადმოსცეთ მნიშვნელობა ფერის მეშვეობით რამდენიმე ფერის სასარგებლო კლასებით. ასევე მოიცავს სტილის ბმულების მხარდაჭერას hover მდგომარეობებთან ერთად.

საქმე კონკრეტულობასთან

ზოგჯერ კონტექსტური კლასების გამოყენება შეუძლებელია სხვა სელექტორის სპეციფიკის გამო. ზოგიერთ შემთხვევაში, საკმარისი გამოსავალია თქვენი ელემენტის შინაარსი <div>კლასთან a-ში შეფუთვა.

დამხმარე ტექნოლოგიების მნიშვნელობის გადმოცემა

მნიშვნელობის დასამატებლად ფერის გამოყენება მხოლოდ ვიზუალურ მითითებას იძლევა, რომელიც არ იქნება გადაცემული დამხმარე ტექნოლოგიების მომხმარებლებზე – როგორიცაა ეკრანის წამკითხველები. დარწმუნდით, რომ ფერით აღნიშული ინფორმაცია ან აშკარაა თავად შინაარსიდან (მაგ. ხილული ტექსტი), ან შედის ალტერნატიული საშუალებებით, როგორიცაა დამატებითი ტექსტი, რომელიც დამალულია .sr-onlyკლასში.

ფერი

.ტექსტი-პირველადი

.ტექსტი-მეორადი

.ტექსტი-წარმატება

.ტექსტი-საშიშროება

.ტექსტ-გაფრთხილება

.ტექსტი-ინფორმაცია

.ტექსტი-სინათლე

.ტექსტი-ბნელი

.ტექსტი-სხეული

.ტექსტი დადუმდა

.ტექსტი-თეთრი

.ტექსტი-შავი-50

.ტექსტი-თეთრი-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">.text-warning</p>
<p class="text-info">.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>

კონტექსტური ტექსტის კლასები ასევე კარგად მუშაობს წამყვანებზე მოწოდებული ჰოვერისა და ფოკუსირების მდგომარეობებით. გაითვალისწინეთ, რომ .text-whiteდა .text-mutedკლასს არ აქვს დამატებითი ბმულის სტილი ხაზგასმის მიღმა.

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Ფონის ფერი

ტექსტის კონტექსტური ფერის კლასების მსგავსად, მარტივად დააყენეთ ელემენტის ფონი ნებისმიერ კონტექსტურ კლასში. ანკორის კომპონენტები ჩაბნელდება სვლისას, ისევე როგორც ტექსტის კლასები. ფონური უტილიტები არ არის დაყენებულიcolor , ამიტომ ზოგიერთ შემთხვევაში მოგინდებათ .text-*კომუნალური პროგრამების გამოყენება.

.ბგ-პირველადი
.ბგ-მეორადი
.ბგ-წარმატება
.ბგ-საფრთხე
.ბგ-გაფრთხილება
.bg-info
.ბგ-სინათლე
.ბგ-ბნელი
.ბგ-თეთრი
.ბგ-გამჭვირვალე
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

ფონის გრადიენტი

როდესაც $enable-gradientsდაყენებულია true(ნაგულისხმევი არის false), შეგიძლიათ გამოიყენოთ .bg-gradient-სასარგებლო კლასები. შეიტყვეთ ჩვენი Sass ვარიანტების შესახებ , რათა ჩართოთ ეს კლასები და სხვა.

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark