Source

ৰং

ৰঙৰ উপযোগিতা শ্ৰেণীৰ মুষ্টিমেয় শ্ৰেণীৰ সৈতে ৰঙৰ জৰিয়তে অৰ্থ প্ৰদান কৰা। হোভাৰ অৱস্থাসমূহৰ সৈতে ষ্টাইলিং সংযোগসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে,ও।

ৰং

.পাঠ-প্ৰাথমিক

.পাঠ-গৌণ

.পাঠ-সফলতা

.পাঠ-বিপদ

.পাঠ-সতৰ্কবাণী

.পাঠ্য-তথ্য

.পাঠ-পোহৰ

.পাঠ-আন্ধাৰ

.পাঠ-শৰীৰ

.পাঠ-নিস্তব্ধ

.পাঠ-বগা

.পাঠ-ক'লা-৫০

.পাঠ-বগা-৫০

<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-আন্ধাৰ
.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 বিকল্পসমূহৰ বিষয়ে জানক ।truefalse.bg-gradient-

  • .bg-gradient-primary
  • .bg-gradient-secondary
  • .bg-gradient-success
  • .bg-gradient-danger
  • .bg-gradient-warning
  • .bg-gradient-info
  • .bg-gradient-light
  • .bg-gradient-dark

নিৰ্দিষ্টতাৰ সৈতে মোকাবিলা কৰা

কেতিয়াবা আন এটা নিৰ্বাচকৰ নিৰ্দিষ্টতাৰ বাবে প্ৰসংগভিত্তিক শ্ৰেণীসমূহ প্ৰয়োগ কৰিব নোৱাৰি। কিছুমান ক্ষেত্ৰত, এটা পৰ্যাপ্ত সমাধান হ'ল আপোনাৰ উপাদানৰ বিষয়বস্তু <div>শ্ৰেণীৰ সৈতে a ত ৰেপ কৰা।

সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা

অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। সুনিশ্চিত কৰক যে ৰঙেৰে চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (যেনে দৃশ্যমান লিখনী), বা বিকল্প উপায়ৰ যোগেদি অন্তৰ্ভুক্ত কৰা হৈছে, যেনে .sr-onlyশ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী।