ਬੈਜ

ਬੈਜ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਸਾਡੀ ਛੋਟੀ ਗਿਣਤੀ ਅਤੇ ਲੇਬਲਿੰਗ ਕੰਪੋਨੈਂਟ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

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

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;