Source

رنگ

مٹھی بھر کلر یوٹیلیٹی کلاسز کے ساتھ رنگ کے ذریعے معنی بیان کریں۔ ہوور اسٹیٹس کے ساتھ اسٹائل لنکس کے لیے بھی سپورٹ شامل ہے۔

رنگ

.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-*۔

.bg-پرائمری
.bg-ثانوی
.bg-کامیابی
.bg-خطرہ
.bg-انتباہ
.bg-info
.bg-light
بی جی ڈارک
.bg-سفید
.bg-شفاف
<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

.bg-گریڈینٹ-پرائمری
.bg-gradient-secondary
.bg-gradient-success
.bg-گریڈینٹ-خطرہ
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-گریڈینٹ-ڈارک
<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کلاس کے ساتھ چھپا ہوا اضافی متن۔