ਬੈਜ
ਬੈਜ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਸਾਡੀ ਛੋਟੀ ਗਿਣਤੀ ਅਤੇ ਲੇਬਲਿੰਗ ਕੰਪੋਨੈਂਟ।
emਸੰਬੰਧਿਤ ਫੌਂਟ ਸਾਈਜ਼ਿੰਗ ਅਤੇ ਯੂਨਿਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤਤਕਾਲੀ ਮੂਲ ਤੱਤ ਦੇ ਆਕਾਰ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਬੈਜ ਸਕੇਲ ।
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>ਕਾਊਂਟਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਬੈਜਾਂ ਨੂੰ ਲਿੰਕਾਂ ਜਾਂ ਬਟਨਾਂ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>ਨੋਟ ਕਰੋ ਕਿ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਬੈਜ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਅਤੇ ਸਮਾਨ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਲਝਣ ਵਾਲੇ ਹੋ ਸਕਦੇ ਹਨ। ਜਦੋਂ ਕਿ ਬੈਜਾਂ ਦੀ ਸ਼ੈਲੀ ਉਹਨਾਂ ਦੇ ਉਦੇਸ਼ ਲਈ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਇਹਨਾਂ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸਿਰਫ਼ ਬੈਜ ਦੀ ਸਮੱਗਰੀ ਨਾਲ ਪੇਸ਼ ਕੀਤਾ ਜਾਵੇਗਾ। ਖਾਸ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ, ਇਹ ਬੈਜ ਕਿਸੇ ਵਾਕ, ਲਿੰਕ ਜਾਂ ਬਟਨ ਦੇ ਅੰਤ 'ਤੇ ਬੇਤਰਤੀਬੇ ਵਾਧੂ ਸ਼ਬਦਾਂ ਜਾਂ ਸੰਖਿਆਵਾਂ ਵਰਗੇ ਲੱਗ ਸਕਦੇ ਹਨ।
ਜਦੋਂ ਤੱਕ ਸੰਦਰਭ ਸਪੱਸ਼ਟ ਨਹੀਂ ਹੁੰਦਾ (ਜਿਵੇਂ ਕਿ "ਸੂਚਨਾਵਾਂ" ਉਦਾਹਰਨ ਦੇ ਨਾਲ, ਜਿੱਥੇ ਇਹ ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ ਕਿ "4" ਸੂਚਨਾਵਾਂ ਦੀ ਸੰਖਿਆ ਹੈ), ਵਾਧੂ ਟੈਕਸਟ ਦੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਲੁਕੇ ਹੋਏ ਹਿੱਸੇ ਦੇ ਨਾਲ ਵਾਧੂ ਸੰਦਰਭ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>ਬੈਜ ਦੀ ਦਿੱਖ ਨੂੰ ਬਦਲਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਸੋਧਕ ਸ਼੍ਰੇਣੀਆਂ ਵਿੱਚੋਂ ਕੋਈ ਵੀ ਸ਼ਾਮਲ ਕਰੋ।
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ
ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .sr-onlyਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।
.badge-pillਬੈਜਾਂ ਨੂੰ ਹੋਰ ਗੋਲ (ਵੱਡੇ border-radiusਅਤੇ ਵਾਧੂ ਹਰੀਜੱਟਲ ਦੇ ਨਾਲ) ਬਣਾਉਣ ਲਈ ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰੋ padding। ਜੇਕਰ ਤੁਸੀਂ v3 ਤੋਂ ਬੈਜ ਖੁੰਝਾਉਂਦੇ ਹੋ ਤਾਂ ਉਪਯੋਗੀ।
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>ਕਿਸੇ ਤੱਤ 'ਤੇ ਪ੍ਰਸੰਗਿਕ .badge-*ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਤੇਜ਼ੀ ਨਾਲ ਹੋਵਰ ਅਤੇ ਫੋਕਸ ਅਵਸਥਾਵਾਂ ਦੇ ਨਾਲ ਕਾਰਵਾਈਯੋਗ ਬੈਜ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।<a>
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>