বেজ

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

এই পৃষ্ঠাত

উদাহৰণ

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>

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

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

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

এটা পৰিবৰ্তন কৰিবলৈ .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>

পটভূমিৰ ৰং

এটা বেজৰ ৰূপ দ্ৰুতভাৱে সলনি কৰিবলৈ আমাৰ পটভূমি সঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। অনুগ্ৰহ কৰি মন কৰক যে Bootstrap ৰ অবিকল্পিত ব্যৱহাৰ কৰাৰ সময়ত .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;