رنگ
مٹھی بھر کلر یوٹیلیٹی کلاسز کے ساتھ رنگ کے ذریعے معنی بیان کریں۔ ہوور اسٹیٹس کے ساتھ اسٹائل لنکس کے لیے بھی سپورٹ شامل ہے۔
.text-primary
متن ثانوی
.text-کامیابی
.text-خطرہ
متن کی وارننگ
متن کی معلومات
.text-light
متن سیاہ
.text-body
متن خاموش
متن-سفید
.text-black-50
.text-white-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استعمال کر سکیں گے ۔ پہلے سے طے شدہ طور پر، غیر فعال ہے اور ذیل کی مثال جان بوجھ کر توڑ دی گئی ہے۔ یہ اس وقت سے آسان حسب ضرورت کے لیے کیا جاتا ہے جب آپ بوٹسٹریپ کا استعمال شروع کرتے ہیں۔ ان کلاسز اور مزید کو فعال کرنے کے لیے ہمارے Sass اختیارات کے بارے میں جانیں ۔.bg-gradient-$enable-gradients
<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کلاس کے ساتھ چھپا ہوا اضافی متن۔