වර්ණ
වර්ණ උපයෝගිතා පන්ති අතලොස්සක් සමඟ වර්ණය හරහා අර්ථය ප්‍රකාශ කරන්න. hover තත්ත්වයන් සමඟින් හැඩගැන්වීම් සබැඳි සඳහා ද සහය ඇතුළත් වේ.
.පෙළ-ප්රාථමික
.පෙළ-ද්විතියික
.පෙළ-සාර්ථකත්වය
.පෙළ-අනතුර
.පෙළ-අවවාදයයි
.පෙළ-තොරතුරු
.පෙළ-ආලෝකය
.පෙළ-අඳුරු
.පෙළ-ශරීරය
.පෙළ-නිශ්ශබ්ද විය
.පෙළ-සුදු
.පෙළ-කළු-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>සන්දර්භ පෙළ පන්ති ද සපයා ඇති hover සහ නාභිගත තත්ත්වයන් සහිත නැංගුරම් මත හොඳින් ක්‍රියා කරයි. සහ පන්තියට යටින් ඉරි ඉරි ඉක්මවා අමතර සබැඳි මෝස්තරයක් නොමැති බව සලකන්න ..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>සන්දර්භීය පෙළ වර්ණ පන්තිවලට සමානව, ඕනෑම සන්දර්භීය පන්තියකට මූලද්රව්යයක පසුබිම පහසුවෙන් සකසන්න. පෙළ පන්ති මෙන්, නැංගුරම් සංරචක hover මත අඳුරු වනු ඇත. පසුබිම් උපයෝගිතා සකසා නැතcolor , එබැවින් සමහර අවස්ථාවලදී ඔබට .text-*උපයෝගිතා භාවිතා කිරීමට අවශ්‍ය වනු ඇත.
<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, ඔබට .bg-gradient-උපයෝගිතා පන්ති භාවිතා කිරීමට හැකි වනු ඇත. පෙරනිමියෙන්, $enable-gradientsඅබල කර ඇති අතර පහත උදාහරණය හිතාමතාම කැඩී ඇත. ඔබ Bootstrap භාවිතා කිරීමට පටන් ගත් මොහොතේ සිට පහසු අභිරුචිකරණය සඳහා මෙය සිදු කෙරේ. මෙම පන්ති සහ තවත් දේ සබල කිරීමට අපගේ Sass විකල්ප ගැන ඉගෙන ගන්න .
<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>විශේෂත්වය සමඟ කටයුතු කිරීම
සමහර විට වෙනත් තේරීමක විශේෂත්වය හේතුවෙන් සන්දර්භීය පන්ති යෙදිය නොහැක. සමහර අවස්ථාවලදී, ප්‍රමාණවත් විසඳුමක් වන්නේ ඔබේ මූලද්‍රව්‍යයේ අන්තර්ගතය <div>පන්තිය සමඟ එතීමයි.
උපකාරක තාක්ෂණයන් සඳහා අර්ථය ලබා දීම
අර්ථය එකතු කිරීම සඳහා වර්ණය භාවිතා කිරීම දෘශ්‍ය ඇඟවීමක් පමණක් සපයයි, එය තිර කියවනය වැනි ආධාරක තාක්ෂණයන් භාවිතා කරන්නන්ට ලබා නොදේ. වර්ණයෙන් දැක්වෙන තොරතුරු එක්කෝ අන්තර්ගතයෙන්ම පැහැදිලි බව (උදා: දෘශ්‍ය පෙළ) හෝ .sr-onlyපන්තිය සමඟ සඟවා ඇති අතිරේක පෙළ වැනි විකල්ප ක්‍රම මගින් ඇතුළත් කර ඇති බව සහතික කර ගන්න.