ਬੈਜ

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

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

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>

ਨੋਟ ਕਰੋ ਕਿ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਤਰੀਕੇ 'ਤੇ ਨਿਰਭਰ ਕਰਦਿਆਂ, ਬੈਜ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ ਸਮਾਨ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਲਝਣ ਵਾਲੇ ਹੋ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਕਿ ਬੈਜਾਂ ਦੀ ਸ਼ੈਲੀ ਉਹਨਾਂ ਦੇ ਉਦੇਸ਼ ਲਈ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਇਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਿਰਫ਼ ਬੈਜ ਦੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ। ਖਾਸ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਇਹ ਬੈਜ ਕਿਸੇ ਵਾਕ, ਲਿੰਕ ਜਾਂ ਬਟਨ ਦੇ ਅੰਤ 'ਤੇ ਬੇਤਰਤੀਬੇ ਵਾਧੂ ਸ਼ਬਦਾਂ ਜਾਂ ਸੰਖਿਆਵਾਂ ਵਰਗੇ ਲੱਗ ਸਕਦੇ ਹਨ।

ਜਦੋਂ ਤੱਕ ਸੰਦਰਭ ਸਪੱਸ਼ਟ ਨਹੀਂ ਹੁੰਦਾ (ਜਿਵੇਂ ਕਿ "ਸੂਚਨਾਵਾਂ" ਉਦਾਹਰਨ ਦੇ ਨਾਲ, ਜਿੱਥੇ ਇਹ ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ ਕਿ "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;