ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਬਟਨ

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

ਉਦਾਹਰਨਾਂ

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

<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"ਨੂੰ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਜਿਵੇਂ ਕਿ ਉਹਨਾਂ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਉਚਿਤ ਰੂਪ ਵਿੱਚ ਪਹੁੰਚਾਉਣ ਲਈ ਇੱਕ ਦਿੱਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਸਕ੍ਰੀਨ ਰੀਡਰ।

ਲਿੰਕ
<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-*ਕਿਸੇ ਵੀ ਬਟਨ 'ਤੇ ਸਾਰੇ ਪਿਛੋਕੜ ਚਿੱਤਰਾਂ ਅਤੇ ਰੰਗਾਂ ਨੂੰ ਹਟਾਉਣ ਲਈ ਡਿਫੌਲਟ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਨੂੰ ਉਹਨਾਂ ਨਾਲ ਬਦਲੋ ।

<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ਵਾਧੂ ਆਕਾਰਾਂ ਲਈ।

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

ਅਪਾਹਜ ਸਥਿਤੀ

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

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

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

  • <a>s disabledਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ .disabledਇਸ ਨੂੰ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਅਯੋਗ ਬਣਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ।
  • pointer-eventsਐਂਕਰ ਬਟਨਾਂ 'ਤੇ ਸਭ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕੁਝ ਭਵਿੱਖ-ਅਨੁਕੂਲ ਸ਼ੈਲੀਆਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ ।
  • ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਰਤ ਰਹੇ ਅਯੋਗ ਬਟਨਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ <a>ਸ਼ਾਮਲ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।aria-disabled="true"
  • ਵਰਤ ਰਹੇ ਅਯੋਗ ਬਟਨਾਂ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ <a> ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ ।href
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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"

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

ਬਲਾਕ ਬਟਨ

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

<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

<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ਤੇ ਵੀ, ਨਾਲ ਕੇਂਦਰਿਤ ਕਰੋ।

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

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

<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" ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਇਹ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਨੂੰ ਉਚਿਤ ਢੰਗ ਨਾਲ ਪਹੁੰਚਾਇਆ ਗਿਆ ਹੈ।

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<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>

ਢੰਗ

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

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

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

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

ਸੱਸ

ਵੇਰੀਏਬਲ

$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:              $link-color;
$btn-link-hover-color:        $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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

ਲੂਪਸ

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

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

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