ବ୍ୟାଜ୍
ବ୍ୟାଜ୍ ପାଇଁ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଉଦାହରଣ, ଆମର ଛୋଟ ଗଣନା ଏବଂ ଲେବଲ୍ ଉପାଦାନ |
ଉଦାହରଣଗୁଡିକ
em
ଆପେକ୍ଷିକ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ୟୁନିଟ୍ ବ୍ୟବହାର କରି ତୁରନ୍ତ ପ୍ୟାରେଣ୍ଟ୍ ଉପାଦାନର ଆକାର ସହିତ ମେଳ କରିବାକୁ ବ୍ୟାଜ୍ ସ୍କେଲ୍ | V5 ପରି, ବ୍ୟାଜ୍ ଗୁଡିକ ଆଉ ଲିଙ୍କ୍ ପାଇଁ ଫୋକସ୍ କିମ୍ବା ହୋଭର୍ ଷ୍ଟାଇଲ୍ ନାହିଁ |
ଶିରୋନାମା
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ |ନୂତନ
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
ବଟନ୍
କାଉଣ୍ଟର ଯୋଗାଇବା ପାଇଁ ବ୍ୟାଜ୍ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ ର ଅଂଶ ଭାବରେ ବ୍ୟବହୃତ ହୋଇପାରେ |
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସେଗୁଡିକ କିପରି ବ୍ୟବହାର କରାଯାଏ ତାହା ଉପରେ ନିର୍ଭର କରି, ବ୍ୟାଜ୍ ସ୍କ୍ରିନ୍ ପାଠକ ଏବଂ ସମାନ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ହୋଇପାରେ | ବ୍ୟାଜ୍ ର ଷ୍ଟାଇଲିଂ ସେମାନଙ୍କର ଉଦ୍ଦେଶ୍ୟ ବିଷୟରେ ଏକ ଭିଜୁଆଲ୍ କ୍ୟୁ ପ୍ରଦାନ କରୁଥିବାବେଳେ, ଏହି ଉପଭୋକ୍ତାମାନଙ୍କୁ କେବଳ ବ୍ୟାଜ୍ ର ବିଷୟବସ୍ତୁ ସହିତ ଉପସ୍ଥାପିତ କରାଯିବ | ନିର୍ଦ୍ଦିଷ୍ଟ ପରିସ୍ଥିତି ଉପରେ ନିର୍ଭର କରି, ଏହି ବ୍ୟାଜ୍ ଗୁଡିକ ବାକ୍ୟ, ଲିଙ୍କ୍, କିମ୍ବା ବଟନ୍ ଶେଷରେ ଅନିୟମିତ ଅତିରିକ୍ତ ଶବ୍ଦ କିମ୍ବା ସଂଖ୍ୟା ପରି ମନେହୁଏ |
ଯଦି ପ୍ରସଙ୍ଗଟି ସ୍ପଷ୍ଟ ନହୁଏ (ଯେପରି “ବିଜ୍ଞପ୍ତି” ଉଦାହରଣ ସହିତ, ଯେଉଁଠାରେ ଏହା ବୁ understood ାପଡେ ଯେ “4” ହେଉଛି ବିଜ୍ଞପ୍ତି ସଂଖ୍ୟା), ଅତିରିକ୍ତ ପାଠ୍ୟର ଏକ ଦୃଶ୍ୟ ଲୁକ୍କାୟିତ ଖଣ୍ଡ ସହିତ ଅତିରିକ୍ତ ପ୍ରସଙ୍ଗ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ବିଚାର କରନ୍ତୁ |
ସ୍ଥିତ
.badge
ଏକ ରୂପାନ୍ତର କରିବାକୁ ଏବଂ ଏହାକୁ ଏକ ଲିଙ୍କ୍ କିମ୍ବା ବଟନ୍ କୋଣରେ ରଖିବା ପାଇଁ ଉପଯୋଗିତା ବ୍ୟବହାର କରନ୍ତୁ |
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
.badge
ଅଧିକ ଜେନେରିକ୍ ସୂଚକ ପାଇଁ ଗଣନା ବିନା ଆପଣ କ୍ଲାସ୍କୁ ଆଉ କିଛି ୟୁଟିଲିଟି ସହିତ ବଦଳାଇ ପାରିବେ |
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
ପୃଷ୍ଠଭୂମି ରଙ୍ଗ |
ବ୍ୟାଜ୍ ର ଦୃଶ୍ୟକୁ ଶୀଘ୍ର ପରିବର୍ତ୍ତନ କରିବାକୁ ଆମର ପୃଷ୍ଠଭୂମି ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ | ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଡିଫଲ୍ଟ ବ୍ୟବହାର କରିବାବେଳେ .bg-light
, ଆପଣଙ୍କୁ .text-dark
ସଠିକ୍ ଷ୍ଟାଇଲ୍ ପାଇଁ ଏକ ପାଠ୍ୟ ରଙ୍ଗ ଉପଯୋଗୀତା ଆବଶ୍ୟକ | ଏହାର କାରଣ ହେଉଛି, ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା କିଛି ସେଟ୍ କରେ ନାହିଁ background-color
|
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .visually-hidden
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ପିଲ୍ ବ୍ୟାଜ୍
.rounded-pill
ଏକ ବଡ଼ ସହିତ ବ୍ୟାଜ୍କୁ ଅଧିକ ଗୋଲାକାର କରିବା ପାଇଁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ border-radius
|
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
ସାସ୍ |
ଭେରିଏବଲ୍ |
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;