ਬੈਜ
ਬੈਜ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਸਾਡੀ ਛੋਟੀ ਗਿਣਤੀ ਅਤੇ ਲੇਬਲਿੰਗ ਕੰਪੋਨੈਂਟ।
ਉਦਾਹਰਨ
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>