ਬਟਨ

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

ਉਦਾਹਰਨਾਂ

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

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

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

ਜੇਕਰ ਤੁਸੀਂ ਬਟਨ ਟੈਕਸਟ ਨੂੰ ਸਮੇਟਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ .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>

ਬਲਾਕ ਪੱਧਰ ਦੇ ਬਟਨ ਬਣਾਓ—ਜੋ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਪੂਰੀ ਚੌੜਾਈ ਨੂੰ ਫੈਲਾਉਂਦੇ ਹਨ—ਜੋੜ ਕੇ .btn-block।

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

ਸਰਗਰਮ ਰਾਜ

ਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ, ਗੂੜ੍ਹੇ ਕਿਨਾਰੇ, ਅਤੇ ਜਦੋਂ ਸ਼ੈਡੋਜ਼ ਸਮਰਥਿਤ ਹੁੰਦੇ ਹਨ, ਇੱਕ ਇਨਸੈਟ ਸ਼ੈਡੋ ਦੇ ਨਾਲ ਕਿਰਿਆਸ਼ੀਲ ਹੋਣ 'ਤੇ ਬਟਨ ਦਬਾਏ ਦਿਖਾਈ ਦੇਣਗੇ। s ਵਿੱਚ ਇੱਕ ਕਲਾਸ ਜੋੜਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ ਹੈ <button>ਕਿਉਂਕਿ ਉਹ ਇੱਕ ਸੂਡੋ-ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ । ਹਾਲਾਂਕਿ, ਤੁਸੀਂ ਅਜੇ ਵੀ ਉਸੇ ਕਿਰਿਆਸ਼ੀਲ ਦਿੱਖ ਨੂੰ ਮਜਬੂਰ ਕਰ ਸਕਦੇ ਹੋ .active(ਅਤੇ aria-pressed=“true”ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ) ਜੇਕਰ ਤੁਹਾਨੂੰ ਰਾਜ ਨੂੰ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਦੁਹਰਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ।

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

ਅਪਾਹਜ ਸਥਿਤੀ

ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ disabledਬੂਲੀਅਨ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋੜ ਕੇ ਬਟਨਾਂ ਨੂੰ ਅਕਿਰਿਆਸ਼ੀਲ ਦਿੱਖ ਦਿਓ ।<button>

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

ਬਟਨ ਪਲੱਗਇਨ

ਬਟਨਾਂ ਨਾਲ ਹੋਰ ਕਰੋ। ਕੰਟਰੋਲ ਬਟਨ ਸਟੇਟਸ ਜਾਂ ਟੂਲਬਾਰ ਵਰਗੇ ਹੋਰ ਹਿੱਸਿਆਂ ਲਈ ਬਟਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾਓ।

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

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

ਚੈੱਕਬਾਕਸ ਅਤੇ ਰੇਡੀਓ ਬਟਨ

ਬੂਟਸਟਰੈਪ ਦੀਆਂ .buttonਸ਼ੈਲੀਆਂ ਨੂੰ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ <label>s, ਚੈੱਕਬਾਕਸ ਜਾਂ ਰੇਡੀਓ ਸਟਾਈਲ ਬਟਨ ਟੌਗਲਿੰਗ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ। data-toggle="buttons"JavaScript ਦੁਆਰਾ ਉਹਨਾਂ ਦੇ ਟੌਗਲਿੰਗ .btn-groupਵਿਵਹਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਉਹਨਾਂ ਸੋਧੇ ਬਟਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਆਪਣੇ ਬਟਨਾਂ ਦੇ ਅੰਦਰ s .btn-group-toggleਨੂੰ ਸਟਾਈਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਨੋਟ ਕਰੋ ਕਿ ਤੁਸੀਂ ਸਿੰਗਲ ਇਨਪੁਟ-ਸੰਚਾਲਿਤ ਬਟਨ ਜਾਂ ਉਹਨਾਂ ਦੇ ਸਮੂਹ ਬਣਾ ਸਕਦੇ ਹੋ।<input>

ਇਹਨਾਂ ਬਟਨਾਂ ਲਈ ਜਾਂਚ ਕੀਤੀ ਸਥਿਤੀ ਸਿਰਫ ਬਟਨ 'ਤੇ ਇਵੈਂਟ ਦੁਆਰਾ ਅਪਡੇਟ ਕੀਤੀclick ਜਾਂਦੀ ਹੈ । ਜੇਕਰ ਤੁਸੀਂ ਇਨਪੁਟ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ ਕਿਸੇ ਹੋਰ ਢੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ—ਜਿਵੇਂ ਕਿ, <input type="reset">ਇਨਪੁਟ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਹੱਥੀਂ ਜਾਂ ਹੱਥੀਂ ਲਾਗੂ ਕਰਕੇ checked—ਤੁਹਾਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਨ ਦੀ ਲੋੜ .activeਪਵੇਗੀ <label>।

ਨੋਟ ਕਰੋ ਕਿ ਪ੍ਰੀ-ਚੈੱਕ ਕੀਤੇ ਬਟਨਾਂ ਲਈ ਤੁਹਾਨੂੰ .activeਕਲਾਸ ਨੂੰ ਹੱਥੀਂ ਇਨਪੁਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ <label>।

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

ਢੰਗ