ৰং আৰু পটভূমি

বিপৰীতমুখী অগ্ৰভূমি ৰঙৰ সৈতে এটা পটভূমিৰ ৰং নিৰ্ধাৰণ কৰক।

এই পৃষ্ঠাত

অভাৰভিউ

v5.2.0 ত যোগ কৰা হৈছে

.text-*ৰং আৰু পটভূমি সহায়কসকলে আমাৰ উপযোগীতা আৰু .bg-*উপযোগীতাসমূহৰ শক্তিক এটা শ্ৰেণীত একত্ৰিত কৰে। আমাৰ Sass color-contrast()ফাংচন ব্যৱহাৰ কৰি, আমি স্বয়ংক্ৰিয়ভাৱে colorএটা বিশেষ ৰ বাবে এটা কনট্ৰাষ্টিং নিৰ্ধাৰণ কৰোঁ background-color।

মুৰ ডাঙি! বৰ্তমান CSS-নেটিভ ফাংচনৰ বাবে কোনো সমৰ্থন নাই color-contrast, গতিকে আমি Sass ৰ জৰিয়তে আমাৰ নিজৰ ব্যৱহাৰ কৰো। ইয়াৰ অৰ্থ হ'ল যে CSS চলকসমূহৰ যোগেদি আমাৰ থিম ৰংসমূহ কাষ্টমাইজ কৰিলে এই সঁজুলিসমূহৰ সৈতে ৰঙৰ বিপৰীতমুখী সমস্যাৰ সৃষ্টি হ'ব পাৰে।

বিপৰীত ৰঙৰ সৈতে প্ৰাথমিক

বিপৰীত ৰঙৰ সৈতে গৌণ

বিপৰীতমুখী ৰঙৰ সৈতে সফলতা

বিপৰীতমুখী ৰঙৰ সৈতে বিপদ

বিপৰীতমুখী ৰঙৰ সৈতে সতৰ্কবাণী

কনট্ৰাষ্টিং ৰঙৰ সৈতে তথ্য

বিপৰীতমুখী ৰঙৰ সৈতে পোহৰ

বিপৰীত ৰঙৰ সৈতে গাঢ়

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

উপাদানসমূহৰ সৈতে

.text-*সংযুক্ত আৰু .bg-*শ্ৰেণীৰ ঠাইত ব্যৱহাৰ কৰক , যেনে বেজত :

প্ৰাথমিক তথ্য

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

বা কাৰ্ডত :

হেডাৰ

কাৰ্ডৰ শিৰোনামৰ ওপৰত নিৰ্মাণ কৰিবলৈ আৰু কাৰ্ডৰ বিষয়বস্তুৰ ডাঙৰ অংশ গঠন কৰিবলৈ কিছুমান দ্ৰুত উদাহৰণ লিখনী।

হেডাৰ

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>