بوت اسپین 5 دکھائی

ਬਟਨ ਸਟਾਈਲ

Bootstrap 5 ਵੱਖ-ਵੱਖ ਸਟਾਈਲ ਦੇ ਬਟਨਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

<button type="button" class="btn">ਮੂਲ</button>
<button type="button" class="btn btn-primary">ਮੁੱਖ</button>
<button type="button" class="btn btn-secondary">ਸਹਾਇਕ</button>
<button type="button" class="btn btn-success">ਸਫਲ</button>
<button type="button" class="btn btn-info">ਸੂਚਨਾ</button>
<button type="button" class="btn btn-warning">ਚਿਤਾਵਨੀ</button>
<button type="button" class="btn btn-danger">ਖਤਰਨਕ</button>
<button type="button" class="btn btn-dark">ਗਰਮ</button>
<button type="button" class="btn btn-light">ਕੱਚਮ</button>
<button type="button" class="btn btn-link">ਲਿੰਕ</button>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਬਟਨ ਕਲਾਸ ਵਰਤਿਆ ਜਾ ਸਕਦੀ ਹੈ <a>ਅਤੇ<button> ਜਾਂ <input> ਐਲੀਮੈਂਟਸ:

ਉਦਾਹਰਣ

<a href="#" class="btn btn-success">ਲਿੰਕ ਬਟਨ</a>
<button type="button" class="btn btn-success">ਬਟਨ</button>
<input type="button" class="btn btn-success" value="ਇਨਪੁਟ ਬਟਨ">
<input type="submit" class="btn btn-success" value="ਸੰਭਾਲ ਬਟਨ">
<input type="reset" class="btn btn-success" value="ਮੁੜ ਸੈੱਟ ਬਟਨ">

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਅਸੀਂ ਕਿਉਂ ਲਿੰਕ ਦੇ href ਪ੍ਰਤੀਯੋਗੀ ਵਿੱਚ # ਲਿਖਦੇ ਹਾਂ?

ਅਸੀਂ ਕੋਈ ਲਿੰਕ ਕਰਨ ਵਾਲੀ ਪੰਨੀ ਨਹੀਂ ਹਨ ਅਤੇ ਅਸੀਂ '404' ਸੁਨੇਹਾ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਇਸ ਲਈ ਅਸੀਂ # ਨੂੰ ਲਿੰਕ ਵਜੋਂ ਲਿਖਿਆ ਹੈ। ਅਜਿਹੇ ਮਾਮਲੇ ਵਿੱਚ ਇਹ 'ਖੋਜ' ਪੰਨੀ ਦੀ ਖੁਦਾਈ ਵਾਲੀ ਠੀਕ ਯੂਆਰਐੱਲ ਹੋਵੇਗੀ。

ਬਟਨ ਕੋਨੇ

Bootstrap 5 ਨੇ ਆਠ ਕੋਨੇ/ਬੰਦਰ ਬਟਨਾਂ ਵੀ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ。

ਮਾਉਸ ਨੂੰ ਉਨ੍ਹਾਂ ਉੱਤੇ ਲਿਆਉਣ ਨਾਲ ਅਤਿਰਿਕਤ 'ਸਫਰਲਾਤ' ਦਿਸਾਈ ਦੇਖੋ:

ਉਦਾਹਰਣ

<button type="button" class="btn btn-outline-primary">ਮੁੱਖ</button>
<button type="button" class="btn btn-outline-secondary">ਸਹਾਇਕ</button>
<button type="button" class="btn btn-outline-success">ਸਫਲ</button>
<button type="button" class="btn btn-outline-info">ਸੂਚਨਾ</button>
<button type="button" class="btn btn-outline-warning">ਚਿਤਾਵਨੀ</button>
<button type="button" class="btn btn-outline-danger">ਖਤਰਨਾਕ</button>
<button type="button" class="btn btn-outline-dark">ਗਰੀਬ</button>
<button type="button" class="btn btn-outline-light text-dark">ਕੱਚਮੀ</button>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਬਟਨ ਅਕਾਰ

ਵੱਡੇ ਬਟਨਾਂ ਲਈ ਵਰਤੋਂ ਕਰੋ .btn-lg ਕਲਾਸ, ਛੋਟੇ ਬਟਨਾਂ ਲਈ ਵਰਤੋਂ ਕਰੋ .btn-sm ਕਲਾਸ:

ਉਦਾਹਰਣ

<button type="button" class="btn btn-primary btn-lg">ਵੱਡਾ</button>
<button type="button" class="btn btn-primary">ਮੂਲਤਵੀ</button>
<button type="button" class="btn btn-primary btn-sm">ਛੋਟਾ</button>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਬਲਕ ਬਟਨ

ਅਗਰ ਤੁਸੀਂ ਪੈਰੈਂਟ ਐਲੀਮੈਂਟ ਪੂਰੇ ਚੌਡਾਈ ਵਾਲਾ ਬਲਕ ਬਟਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਪੈਰੈਂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਇਸ ਨੂੰ ਵਰਤੋਂ ਕਰੋ .d-grid helper ਕਲਾਸ:

ਉਦਾਹਰਣ

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">ਪੂਰੀ ਚੌੜਾਈ ਬਟਨ</button>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਤੁਸੀਂ ਬਹੁਤ ਸਾਰੇ ਬਲਕ ਬਟਨ ਹੋਣ ਤਾਂ .gap-* ਵਰਗ ਉਨ੍ਹਾਂ ਦਰਮਿਆਨ ਦੀ ਦੂਰੀ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਣ

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">ਪੂਰੀ ਚੌੜਾਈ ਬਟਨ</button>
  <button type="button" class="btn btn-primary btn-block">ਪੂਰੀ ਚੌੜਾਈ ਬਟਨ</button>
  <button type="button" class="btn btn-primary btn-block">ਪੂਰੀ ਚੌੜਾਈ ਬਟਨ</button>
</div>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਸਰਗਰਮ/ਨਿਸ਼ਚਿਤ ਬਟਨ

ਬਟਨ ਨੂੰ ਸਰਗਰਮ (ਦਬਾਏ ਹੋਏ ਦਿਸਾਈ) ਜਾਂ ਨਿਸ਼ਚਿਤ (ਨਾਚੁੱਕ) ਸਥਿਤੀ ਵਿੱਚ ਸੈੱਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:

ਵਰਗ .active ਬਟਨ ਨੂੰ ਦਬਾਏ ਹੋਏ ਦਿਸਾਈ ਕਰਦੀ ਹੈ, ਜਦਕਿ disabled ਵਿਸ਼ੇਸ਼ਤਾ ਬਟਨ ਨੂੰ ਨਾਚੁੱਕ ਕਰਦੀ ਹੈ। ਮਹਿਸੂਸ ਕਰੋ, <a> ਐਲੀਮੈਂਟ ਵਿੱਚ disabled ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਇਸ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਹੈ .disabled ਵਰਗ ਉਸ ਨੂੰ ਦਿਸ਼ਾ ਵਿੱਚ ਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ。

ਉਦਾਹਰਣ

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ

ਲੋਡਰ ਬਟਨ

ਤੁਸੀਂ ਬਟਨ ਵਿੱਚ "spinner" ਵੀ ਜੋੜ ਸਕਦੇ ਹੋ, ਤੁਸੀਂ ਸਾਡੇ BS5 Spinner ਸਿਖਲਾਈ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਕੁਝ ਸਿੱਖ ਸਕਦੇ ਹੋ:

ਉਦਾਹਰਣ

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਕ੍ਰਿਆ ਕਰੋ