வண்ணங்கள்
ஒரு சில வண்ண பயன்பாட்டு வகுப்புகளுடன் வண்ணத்தின் மூலம் அர்த்தத்தை தெரிவிக்கவும். ஹோவர் நிலைகளுடன் ஸ்டைலிங் இணைப்புகளுக்கான ஆதரவையும் உள்ளடக்கியது.
.உரை-முதன்மை
.உரை-இரண்டாம் நிலை
.உரை-வெற்றி
.உரை-ஆபத்து
.உரை-எச்சரிக்கை
.உரை-தகவல்
.உரை-ஒளி
.உரை-இருட்டு
.உரை-உடல்
.உரை-முடக்கப்பட்டது
.உரை-வெள்ளை
.உரை-கருப்பு-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-*பயன்பாடுகளைப் பயன்படுத்த விரும்புவீர்கள்.
<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முடக்கப்பட்டது மற்றும் கீழே உள்ள எடுத்துக்காட்டு வேண்டுமென்றே உடைக்கப்பட்டது. நீங்கள் பூட்ஸ்டார்ப்பைப் பயன்படுத்தத் தொடங்கிய தருணத்திலிருந்து எளிதாக தனிப்பயனாக்குவதற்காக இது செய்யப்படுகிறது. இந்த வகுப்புகள் மற்றும் பலவற்றை இயக்க எங்கள் 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வகுப்பில் மறைக்கப்பட்ட கூடுதல் உரை போன்ற மாற்று வழிகளில் சேர்க்கப்பட்டுள்ளது.