ਬਟਨ

ਕਈ ਆਕਾਰਾਂ, ਅਵਸਥਾਵਾਂ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦੇ ਸਮਰਥਨ ਨਾਲ ਫਾਰਮਾਂ, ਡਾਇਲਾਗਸ, ਅਤੇ ਹੋਰ ਵਿੱਚ ਕਾਰਵਾਈਆਂ ਲਈ ਬੂਟਸਟਰੈਪ ਦੀਆਂ ਕਸਟਮ ਬਟਨ ਸ਼ੈਲੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨਾਂ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਕਈ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਬਟਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਹਨ, ਹਰ ਇੱਕ ਆਪਣੇ ਖੁਦ ਦੇ ਅਰਥਪੂਰਨ ਉਦੇਸ਼ ਦੀ ਪੂਰਤੀ ਕਰਦਾ ਹੈ, ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਲਈ ਕੁਝ ਵਾਧੂ ਚੀਜ਼ਾਂ ਦੇ ਨਾਲ।

html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਨੂੰ ਅਰਥ ਪ੍ਰਦਾਨ ਕਰਨਾ

ਅਰਥ ਜੋੜਨ ਲਈ ਰੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕੇਵਲ ਇੱਕ ਵਿਜ਼ੂਅਲ ਸੰਕੇਤ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਸਹਾਇਕ ਤਕਨੀਕਾਂ - ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਨਹੀਂ ਦਿੱਤਾ ਜਾਵੇਗਾ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਰੰਗ ਦੁਆਰਾ ਦਰਸਾਈ ਗਈ ਜਾਣਕਾਰੀ ਜਾਂ ਤਾਂ ਸਮੱਗਰੀ ਤੋਂ ਹੀ ਸਪੱਸ਼ਟ ਹੈ (ਜਿਵੇਂ ਕਿ ਦਿਖਣਯੋਗ ਟੈਕਸਟ), ਜਾਂ ਵਿਕਲਪਕ ਸਾਧਨਾਂ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੀ ਗਈ ਹੈ, ਜਿਵੇਂ ਕਿ .visually-hiddenਕਲਾਸ ਦੇ ਨਾਲ ਲੁਕਿਆ ਵਾਧੂ ਟੈਕਸਟ।

ਟੈਕਸਟ ਰੈਪਿੰਗ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਓ

ਜੇਕਰ ਤੁਸੀਂ ਬਟਨ ਟੈਕਸਟ ਨੂੰ ਸਮੇਟਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ .text-nowrapਕਲਾਸ ਨੂੰ ਬਟਨ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ। Sass ਵਿੱਚ, ਤੁਸੀਂ $btn-white-space: nowrapਹਰੇਕ ਬਟਨ ਲਈ ਟੈਕਸਟ ਰੈਪਿੰਗ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।

ਬਟਨ ਟੈਗ

.btnਕਲਾਸਾਂ ਨੂੰ ਤੱਤ ਦੇ ਨਾਲ ਵਰਤਣ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ <button>। <a>ਹਾਲਾਂਕਿ, ਤੁਸੀਂ ਇਹਨਾਂ ਕਲਾਸਾਂ ਨੂੰ ਜਾਂ ਐਲੀਮੈਂਟਸ 'ਤੇ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ <input>(ਹਾਲਾਂਕਿ ਕੁਝ ਬ੍ਰਾਊਜ਼ਰ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਰੈਂਡਰਿੰਗ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹਨ)।

<a>ਮੌਜੂਦਾ ਪੰਨੇ ਦੇ ਅੰਦਰ ਨਵੇਂ ਪੰਨਿਆਂ ਜਾਂ ਭਾਗਾਂ ਨੂੰ ਲਿੰਕ ਕਰਨ ਦੀ ਬਜਾਏ, ਇਨ-ਪੇਜ ਕਾਰਜਸ਼ੀਲਤਾ (ਜਿਵੇਂ ਸਮਗਰੀ ਨੂੰ ਸਮੇਟਣਾ) ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਤੱਤਾਂ 'ਤੇ ਬਟਨ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਇਹਨਾਂ ਲਿੰਕਾਂ role="button"ਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਜਿਵੇਂ ਕਿ ਉਹਨਾਂ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਉਚਿਤ ਰੂਪ ਵਿੱਚ ਪਹੁੰਚਾਉਣ ਲਈ ਇੱਕ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਸਕ੍ਰੀਨ ਰੀਡਰ।

ਲਿੰਕ

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

ਰੂਪਰੇਖਾ ਬਟਨ

ਇੱਕ ਬਟਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਉਹ ਮੋਟੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗ ਨਹੀਂ ਲਿਆਉਂਦੇ? .btn-outline-*ਕਿਸੇ ਵੀ ਬਟਨ 'ਤੇ ਸਾਰੇ ਪਿਛੋਕੜ ਚਿੱਤਰਾਂ ਅਤੇ ਰੰਗਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ ਡਿਫੌਲਟ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਨੂੰ ਉਹਨਾਂ ਨਾਲ ਬਦਲੋ ।

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

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

ਆਕਾਰ

ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਜੋੜੋ .btn-lgਜਾਂ .btn-smਵਾਧੂ ਆਕਾਰ ਲਈ।

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

ਤੁਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਆਕਾਰ ਨੂੰ ਵੀ ਰੋਲ ਕਰ ਸਕਦੇ ਹੋ:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

ਅਪਾਹਜ ਸਥਿਤੀ

ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ disabledਬੂਲੀਅਨ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜ ਕੇ ਬਟਨਾਂ ਨੂੰ ਅਕਿਰਿਆਸ਼ੀਲ ਦਿੱਖ ਦਿਓ । <button>ਅਯੋਗ ਬਟਨ pointer-events: noneਲਾਗੂ ਕੀਤੇ ਗਏ ਹਨ, ਹੋਵਰ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀਆਂ ਨੂੰ ਟ੍ਰਿਗਰ ਹੋਣ ਤੋਂ ਰੋਕਦੇ ਹੋਏ।

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਯੋਗ ਬਟਨ <a>ਥੋੜਾ ਵੱਖਰਾ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ:

<a>s disabledਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ .disabledਇਸ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਅਯੋਗ ਬਣਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ।
pointer-eventsਐਂਕਰ ਬਟਨਾਂ 'ਤੇ ਸਭ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕੁਝ ਭਵਿੱਖ-ਅਨੁਕੂਲ ਸ਼ੈਲੀਆਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ।
ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤ ਰਹੇ ਅਯੋਗ ਬਟਨਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ <a>ਸ਼ਾਮਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।aria-disabled="true"
ਵਰਤ ਰਹੇ ਅਯੋਗ ਬਟਨਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ <a> ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ ।href

ਪ੍ਰਾਇਮਰੀ ਲਿੰਕ ਲਿੰਕ

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

ਲਿੰਕ ਕਾਰਜਸ਼ੀਲਤਾ ਚੇਤਾਵਨੀ

hrefਉਹਨਾਂ ਮਾਮਲਿਆਂ ਨੂੰ ਕਵਰ ਕਰਨ ਲਈ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਅਯੋਗ ਲਿੰਕ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਰੱਖਣੀ ਪੈਂਦੀ ਹੈ , .disabledਕਲਾਸ s pointer-events: noneਦੀ ਲਿੰਕ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਅਯੋਗ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਲਈ ਵਰਤਦੀ ਹੈ <a>। ਨੋਟ ਕਰੋ ਕਿ ਇਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਹਾਲੇ HTML ਲਈ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ, ਪਰ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਇਸਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਪੋਰਟ ਕਰਨ ਵਾਲੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਵੀ pointer-events: none, ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੁੰਦਾ, ਮਤਲਬ ਕਿ ਦੇਖਣ ਵਾਲੇ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਯੋਗਕਰਤਾ ਅਜੇ ਵੀ ਇਹਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਕਿਰਿਆਸ਼ੀਲ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਗੇ। ਇਸ ਲਈ ਸੁਰੱਖਿਅਤ ਰਹਿਣ ਲਈ, ਇਸ ਤੋਂ ਇਲਾਵਾ , ਕੀਬੋਰਡ ਫੋਕਸ ਪ੍ਰਾਪਤ ਕਰਨ ਤੋਂ ਰੋਕਣ ਲਈ ਇਹਨਾਂ ਲਿੰਕਾਂ 'ਤੇ aria-disabled="true"ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਸ਼ਾਮਲ ਕਰੋ, ਅਤੇ ਉਹਨਾਂ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਯੋਗ ਕਰਨ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ।tabindex="-1"

ਪ੍ਰਾਇਮਰੀ ਲਿੰਕ ਲਿੰਕ

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ਬਲਾਕ ਬਟਨ

ਸਾਡੀ ਡਿਸਪਲੇਅ ਅਤੇ ਗੈਪ ਯੂਟਿਲਿਟੀਜ਼ ਦੇ ਮਿਸ਼ਰਣ ਨਾਲ ਬੂਟਸਟਰੈਪ 4 ਦੇ ਵਾਂਗ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੇ "ਬਲਾਕ ਬਟਨ" ਦੇ ਜਵਾਬਦੇਹ ਸਟੈਕ ਬਣਾਓ। ਬਟਨ ਵਿਸ਼ੇਸ਼ ਕਲਾਸਾਂ ਦੀ ਬਜਾਏ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਸਾਡੇ ਕੋਲ ਸਪੇਸਿੰਗ, ਅਲਾਈਨਮੈਂਟ, ਅਤੇ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ 'ਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਨਿਯੰਤਰਣ ਹੈ।

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ਇੱਥੇ ਅਸੀਂ ਇੱਕ ਜਵਾਬਦੇਹ ਪਰਿਵਰਤਨ ਬਣਾਉਂਦੇ ਹਾਂ, mdਬਰੇਕਪੁਆਇੰਟ ਤੱਕ ਲੰਬਕਾਰੀ ਸਟੈਕਡ ਬਟਨਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹੋਏ, ਜਿੱਥੇ ਕਲਾਸ ਨੂੰ .d-md-blockਬਦਲਦਾ ਹੈ , ਇਸ ਤਰ੍ਹਾਂ ਉਪਯੋਗਤਾ ਨੂੰ ਰੱਦ ਕਰਦਾ ਹੈ। ਉਹਨਾਂ ਨੂੰ ਬਦਲਣ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ।.d-gridgap-2

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ਤੁਸੀਂ ਗਰਿੱਡ ਕਾਲਮ ਚੌੜਾਈ ਕਲਾਸਾਂ ਨਾਲ ਆਪਣੇ ਬਲਾਕ ਬਟਨਾਂ ਦੀ ਚੌੜਾਈ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਨ ਲਈ, ਅੱਧੀ-ਚੌੜਾਈ ਵਾਲੇ “ਬਲਾਕ ਬਟਨ” ਲਈ, ਵਰਤੋ .col-6। ਇਸ ਨੂੰ ਲੇਟਵੇਂ ਤੌਰ ' .mx-autoਤੇ ਵੀ, ਨਾਲ ਕੇਂਦਰਿਤ ਕਰੋ।

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

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

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

ਬਟਨ ਪਲੱਗਇਨ

ਬਟਨ ਪਲੱਗਇਨ ਤੁਹਾਨੂੰ ਸਧਾਰਨ ਚਾਲੂ/ਬੰਦ ਟੌਗਲ ਬਟਨ ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ, ਇਹ ਟੌਗਲ ਬਟਨ ਚੈੱਕਬਾਕਸ ਟੌਗਲ ਬਟਨਾਂ ਦੇ ਸਮਾਨ ਹਨ । ਹਾਲਾਂਕਿ, ਉਹਨਾਂ ਨੂੰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੁਆਰਾ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਦੱਸਿਆ ਜਾਂਦਾ ਹੈ: ਸਕਰੀਨ ਰੀਡਰਾਂ ਦੁਆਰਾ ਚੈੱਕਬਾਕਸ ਟੌਗਲਾਂ ਦੀ ਘੋਸ਼ਣਾ "ਚੈੱਕ"/"ਨਹੀਂ ਕੀਤੀ" ਵਜੋਂ ਕੀਤੀ ਜਾਵੇਗੀ (ਕਿਉਂਕਿ, ਉਹਨਾਂ ਦੀ ਦਿੱਖ ਦੇ ਬਾਵਜੂਦ, ਉਹ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਅਜੇ ਵੀ ਚੈੱਕਬਾਕਸ ਹਨ), ਜਦੋਂ ਕਿ ਇਹਨਾਂ ਟੌਗਲ ਬਟਨਾਂ ਦੀ ਘੋਸ਼ਣਾ ਕੀਤੀ ਜਾਵੇਗੀ "ਬਟਨ"/"ਬਟਨ ਦਬਾਇਆ ਗਿਆ"। ਇਹਨਾਂ ਦੋ ਤਰੀਕਿਆਂ ਵਿਚਕਾਰ ਚੋਣ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਏ ਜਾ ਰਹੇ ਟੌਗਲ ਦੀ ਕਿਸਮ 'ਤੇ ਨਿਰਭਰ ਕਰੇਗੀ, ਅਤੇ ਕੀ ਟੌਗਲ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਚੈਕਬਾਕਸ ਜਾਂ ਇੱਕ ਅਸਲ ਬਟਨ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕੀਤੇ ਜਾਣ 'ਤੇ ਸਮਝ ਵਿੱਚ ਆਵੇਗਾ ਜਾਂ ਨਹੀਂ।

ਸਥਿਤੀਆਂ ਨੂੰ ਟੌਗਲ ਕਰੋ

data-bs-toggle="button"ਇੱਕ ਬਟਨ ਦੀ activeਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ ਜੋੜੋ । .activeਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਨੂੰ ਪ੍ਰੀ-ਟੌਗਲ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਕਲਾਸ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ aria-pressed="true" ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਇਹ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਨੂੰ ਉਚਿਤ ਢੰਗ ਨਾਲ ਪਹੁੰਚਾਇਆ ਗਿਆ ਹੈ।

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

ਲਿੰਕ ਟੌਗਲ ਕਰੋ ਕਿਰਿਆਸ਼ੀਲ ਟੌਗਲ ਲਿੰਕ ਟੌਗਲ ਲਿੰਕ ਨੂੰ ਬੰਦ ਕੀਤਾ ਗਿਆ

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

ਢੰਗ

ਤੁਸੀਂ ਬਟਨ ਕੰਸਟਰਕਟਰ ਨਾਲ ਇੱਕ ਬਟਨ ਉਦਾਹਰਨ ਬਣਾ ਸਕਦੇ ਹੋ, ਉਦਾਹਰਨ ਲਈ:

const bsButton = new bootstrap.Button('#myButton')

ਢੰਗ	ਵਰਣਨ
`dispose`	ਇੱਕ ਤੱਤ ਦੇ ਬਟਨ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)
`getInstance`	ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸੰਬੰਧਿਤ ਬਟਨ ਦੀ ਉਦਾਹਰਣ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਤੁਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	ਸਥਿਰ ਵਿਧੀ ਜੋ ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸਬੰਧਿਤ ਇੱਕ ਬਟਨ ਉਦਾਹਰਨ ਵਾਪਸ ਕਰਦੀ ਹੈ ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਦੀ ਹੈ ਜੇਕਰ ਇਸਨੂੰ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ। ਤੁਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵਰਤ ਸਕਦੇ ਹੋ: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	ਪੁਸ਼ ਸਥਿਤੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਬਟਨ ਨੂੰ ਇਹ ਦਿੱਖ ਦਿੰਦਾ ਹੈ ਕਿ ਇਹ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਗਿਆ ਹੈ।

ਉਦਾਹਰਨ ਲਈ, ਸਾਰੇ ਬਟਨਾਂ ਨੂੰ ਟੌਗਲ ਕਰਨ ਲਈ

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਕਸਤ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਬਟਨ ਹੁਣ .btnਵਿਸਤ੍ਰਿਤ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

ਹਰੇਕ ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਸਾਡੇ , , ਅਤੇ ਮਿਸ਼ਰਣਾਂ ਦੇ .btn-*ਨਾਲ ਵਾਧੂ CSS ਨਿਯਮਾਂ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਕਰਨ ਲਈ ਢੁਕਵੇਂ CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦੀ ਹੈ ।button-variant()button-outline-variant()button-size()

ਇੱਥੇ ਇੱਕ ਕਸਟਮ ਮੋਡੀਫਾਇਰ ਕਲਾਸ ਬਣਾਉਣ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ .btn-*ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਆਪਣੇ ਡੌਕਸ ਲਈ ਵਿਲੱਖਣ ਬਟਨਾਂ ਲਈ ਕਰਦੇ ਹਾਂ Bootstrap ਦੇ CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਸਾਡੇ ਆਪਣੇ CSS ਅਤੇ Sass ਵੇਰੀਏਬਲਾਂ ਦੇ ਮਿਸ਼ਰਣ ਨਾਲ ਦੁਬਾਰਾ ਨਿਰਧਾਰਤ ਕਰਕੇ।

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass ਵੇਰੀਏਬਲ

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

ਸਾਸ ਮਿਸ਼ਰਣ

ਬਟਨਾਂ ਲਈ ਤਿੰਨ ਮਿਕਸਿਨ ਹਨ: ਬਟਨ ਅਤੇ ਬਟਨ ਆਊਟਲਾਈਨ ਵੇਰੀਐਂਟ ਮਿਕਸਿਨ (ਦੋਵੇਂ 'ਤੇ ਆਧਾਰਿਤ $theme-colors), ਨਾਲ ਹੀ ਇੱਕ ਬਟਨ ਦਾ ਆਕਾਰ ਮਿਕਸਿਨ।

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

ਸੱਸ ਲੂਪ

$theme-colorsਬਟਨ ਵੇਰੀਐਂਟ (ਨਿਯਮਿਤ ਅਤੇ ਰੂਪਰੇਖਾ ਬਟਨਾਂ ਲਈ) ਵਿੱਚ ਸੋਧਕ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਸਾਡੇ ਨਕਸ਼ੇ ਦੇ ਨਾਲ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਮਿਸ਼ਰਣ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ scss/_buttons.scss।

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}