বেজ

বেজৰ বাবে নথিপত্ৰ আৰু উদাহৰণ, আমাৰ সৰু গণনা আৰু লেবেলিং উপাদান।

এই পৃষ্ঠাত

উদাহৰণ

emবেজসমূহে আপেক্ষিক আখৰৰ আকাৰ আৰু এককসমূহ ব্যৱহাৰ কৰি তাৎক্ষণিক মূল উপাদানৰ আকাৰৰ সৈতে মিলাবলৈ স্কেল কৰে । v5 ৰ পৰা, বেজসমূহত সংযোগসমূহৰ বাবে আৰু ফ'কাচ বা হ'ভাৰ শৈলী নাই।

শিৰোনামসমূহ

উদাহৰণ শিৰোনামনতুন

html

<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>

বুটামসমূহ

বেজসমূহক লিংক বা বুটামৰ অংশ হিচাপে ব্যৱহাৰ কৰি কাউণ্টাৰ প্ৰদান কৰিব পাৰি।

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

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

যদিহে প্ৰসংগ স্পষ্ট নহয় (“অধিসূচনা” উদাহৰণৰ দৰে, য’ত বুজা যায় যে “৪” হৈছে জাননীৰ সংখ্যা), তেন্তে দৃশ্যগতভাৱে লুকুৱাই ৰখা অতিৰিক্ত লিখনীৰ সৈতে অতিৰিক্ত প্ৰসংগ অন্তৰ্ভুক্ত কৰাৰ কথা চিন্তা কৰক।

অৱস্থান কৰা হৈছে

এটা পৰিবৰ্তন কৰিবলৈ .badgeআৰু এটা সংযোগ বা বুটামৰ চুকত স্থাপন কৰিবলৈ সঁজুলিসমূহ ব্যৱহাৰ কৰক।

html

<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আপুনি শ্ৰেণীটোক অধিক সাধাৰণ সূচকৰ বাবে গণনা নকৰাকৈ আৰু কেইটামান সঁজুলিৰে সলনি কৰিব পাৰে ।

html

<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>

পটভূমিৰ ৰং

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

আমাৰ সহায়কসকলৰbackground-color সৈতে বিপৰীতমুখী অগ্ৰভূমিৰ colorসৈতে এটা স্থাপন কৰক । পূৰ্বতে ইয়াক আপোনাৰ পছন্দৰ আৰু ষ্টাইলিঙৰ বাবে সঁজুলিসমূহ হস্তচালিতভাৱে যোৰ কৰাৰ প্ৰয়োজন আছিল, যি আপুনি এতিয়াও ব্যৱহাৰ কৰিব পাৰে যদি আপুনি পছন্দ কৰে।.text-bg-{color}.text-{color}.bg-{color}

প্ৰাথমিক মাধ্যমিক সফলতা বিপদ সতৰ্কবাণী তথ্য পাতল অন্ধকাৰ

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

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

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

পিল বেজ

.rounded-pillবেজসমূহক এটা ডাঙৰ ৰ সৈতে অধিক ঘূৰণীয়া কৰিবলে সঁজুলি শ্ৰেণী ব্যৱহাৰ কৰক border-radius।

প্ৰাথমিক মাধ্যমিক সফলতা বিপদ সতৰ্কবাণী তথ্য পাতল অন্ধকাৰ

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

চি এছ এছ

চলকসমূহ

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

Bootstrap ৰ বিকাশশীল CSS চলকসমূহ পদ্ধতিৰ অংশ হিচাপে, বেজসমূহে এতিয়া .badgeউন্নত বাস্তৱ-সময় স্বনিৰ্বাচনৰ বাবে স্থানীয় CSS চলকসমূহ অন ব্যৱহাৰ কৰে। CSS চলকসমূহৰ বাবে মানসমূহ Sass ৰ যোগেদি সংহতি কৰা হয়, গতিকে Sass স্বনিৰ্বাচন এতিয়াও সমৰ্থিত,ও।

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass চলকসমূহ

$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;