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.
.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>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>Když $enable-gradientsje nastaveno na true, budete moci používat .bg-gradient-pomocné třídy. Ve výchozím nastavení $enable-gradientsje zakázáno a níže uvedený příklad je záměrně porušen. To se provádí pro snadnější přizpůsobení od okamžiku, kdy začnete používat Bootstrap. Přečtěte si o našich možnostech Sass , které umožňují tyto kurzy a další.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>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ě.