பேட்ஜ்கள்

பேட்ஜ்களுக்கான ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகள், எங்கள் சிறிய எண்ணிக்கை மற்றும் லேபிளிங் கூறு.

இந்தப் பக்கத்தில்

எடுத்துக்காட்டுகள்

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>

பேட்ஜ்கள் எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதைப் பொறுத்து, ஸ்கிரீன் ரீடர்கள் மற்றும் அதுபோன்ற உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு பேட்ஜ்கள் குழப்பமாக இருக்கலாம். பேட்ஜ்களின் ஸ்டைலிங் அவற்றின் நோக்கத்திற்கான காட்சி குறிப்பை வழங்கும் அதே வேளையில், இந்தப் பயனர்கள் பேட்ஜின் உள்ளடக்கத்துடன் வெறுமனே வழங்கப்படுவார்கள். குறிப்பிட்ட சூழ்நிலையைப் பொறுத்து, இந்த பேட்ஜ்கள் ஒரு வாக்கியம், இணைப்பு அல்லது பொத்தானின் முடிவில் சீரற்ற கூடுதல் சொற்கள் அல்லது எண்கள் போல் தோன்றலாம்.

சூழல் தெளிவாக இல்லாவிட்டால் ("அறிவிப்புகள்" எடுத்துக்காட்டில், "4" என்பது அறிவிப்புகளின் எண்ணிக்கை என்று புரிந்து கொள்ளப்பட்டால்), பார்வைக்கு மறைக்கப்பட்ட கூடுதல் உரையுடன் கூடுதல் சூழலைச் சேர்க்கவும்.

நிலைநிறுத்தப்பட்டது

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

CSS

மாறிகள்

v5.2.0 இல் சேர்க்கப்பட்டது

பூட்ஸ்டார்ப்பின் வளரும் 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};

சாஸ் மாறிகள்

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