ਬਟਨ

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

ਉਦਾਹਰਨਾਂ

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

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

ਬਟਨ ਟੈਗ

.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ਐਂਕਰ ਬਟਨਾਂ 'ਤੇ ਸਭ ਨੂੰ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕੁਝ ਭਵਿੱਖ-ਅਨੁਕੂਲ ਸ਼ੈਲੀਆਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ । ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜੋ ਉਸ ਸੰਪੱਤੀ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਤੁਸੀਂ ਅਯੋਗ ਕਰਸਰ ਨੂੰ ਬਿਲਕੁਲ ਵੀ ਨਹੀਂ ਦੇਖ ਸਕੋਗੇ।
• ਅਸਮਰਥਿਤ ਬਟਨਾਂ ਵਿੱਚ aria-disabled="true"ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਲਈ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

ਢੰਗ