Barvy
Přenášejte význam prostřednictvím barev s hrstkou barevných tříd užitných vlastností. Zahrnuje také podporu pro stylování odkazů se stavy přechodu.
Barva
.text-primární
.text-sekundární
.text-úspěch
.text-nebezpečí
.text-varování
.textové informace
.text-light
.text-tmavý
.text-body
.text-ztlumený
.text-bílý
.text-black-50
.text-bílá-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>Třídy kontextového textu také dobře fungují na kotvách s poskytnutými stavy kurzoru a zaměření. Všimněte si, že třída .text-whiteand .text-mutednemá žádný další styl odkazu kromě podtržení.
<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>Barva pozadí
Podobně jako u kontextových tříd barev textu snadno nastavte pozadí prvku na jakoukoli kontextovou třídu. Komponenty kotvy při najetí myší ztmavnou, stejně jako třídy textu. Nástroje na pozadí nenastavujícolor , takže v některých případech budete chtít použít .text-*nástroje.
<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>Přechod na pozadí
Když $enable-gradientsje nastaveno na true(výchozí je false), můžete použít .bg-gradient-pomocné třídy. Přečtěte si o našich možnostech Sass , které umožňují tyto kurzy a další.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark
Zacházení se specifičností
Někdy nelze kontextové třídy použít kvůli specifičnosti jiného selektoru. V některých případech je dostatečným řešením zabalit obsah vašeho prvku <div>do třídy s třídou.
Předávání významu asistenčním technologiím
Použití barvy k přidání významu poskytuje pouze vizuální indikaci, která nebude zprostředkována uživatelům asistenčních technologií – jako jsou čtečky obrazovky. Ujistěte se, že informace označené barvou jsou buď zřejmé ze samotného obsahu (např. viditelný text), nebo jsou zahrnuty alternativními prostředky, jako je další text skrytý ve .sr-onlytřídě.