بوت اسٹرپ 5 بٹن گروپ

ਬਟਨ ਸਮੂਹ

Bootstrap 5 ਨਾਲ ਤੁਸੀਂ ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਇੱਕ ਸਰਗਰਮ ਬਟਨ ਸਮੂਹ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ(ਇੱਕ ਪਟੜੀ 'ਤੇ):

ਸ਼ੁਰੂ ਕਰਕੇ: .btn-group ਕਲਾਸ ਦੀ: <div> ਅਸਮਾਨ ਨੂੰ ਬਟਨ ਸਮੂਹ ਬਣਾਉਣ ਲਈ ਵਰਤੋਂ ਕਰੋ:

ਉਦਾਹਰਣ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ਹਵਾਇਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਜੀਯੰਗ</button>
  <button type="button" class="btn btn-primary">ਮੀਟਾਓ</button>
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਸੁਝਾਅ:ਬਟਨ ਸਮੂਹ ਵਿੱਚ ਬਟਨ ਦਰਜੇ ਨੂੰ ਨਾ ਲਾਗੂ ਕਰੋ, ਬਜਾਰੇ ਕਲਾਸ ਵਰਤੋਂ ਕਰੋ: .btn-group-lg ਵੱਡੇ ਬਟਨ ਸਮੂਹ ਲਈ ਜਾਂ ਪ੍ਰਯੋਗ ਕਰੋ: .btn-group-sm ਸਮੂਹਿਕ ਬਟਨਾਂ ਲਈ:

ਉਦਾਹਰਣ

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">ਹਵਾਇਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਜੀਯੰਗ</button>
  <button type="button" class="btn btn-primary">ਮੀਟਾਓ</button>
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਪੱਚਮੇਰੇ ਬਟਨ ਗਰੁੱਪ

Bootstrap 5 ਪੱਚਮੇਰੇ ਬਟਨ ਗਰੁੱਪ ਦੀ ਹਮਾਇਤ ਵੀ ਕਰਦਾ ਹੈ:

ਕਲਾਸ ਵਰਤੋਂ ਕਰੋ .btn-group-vertical ਪੱਚਮੇਰੇ ਬਟਨ ਗਰੁੱਪ ਬਣਾਓ:

ਉਦਾਹਰਣ

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ਹਵਾਇਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਜੀਯੰਗ</button>
  <button type="button" class="btn btn-primary">ਮੀਟਾਓ</button>
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਪੱਚਮੇਰੇ ਬਟਨ ਗਰੁੱਪ

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਬਟਨ ਗਰੁੱਪ 'inline' ਹਨ, ਬਹੁਤ ਸਾਰੇ ਬਟਨ ਗਰੁੱਪ ਹੋਣ ਤਾਂ ਸਾਰੇ ਪੱਚਮੇਰੇ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣਗੇ:

ਉਦਾਹਰਣ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ਹਵਾਇਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਜੀਯੰਗ</button>
  <button type="button" class="btn btn-primary">ਮੀਟਾਓ</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">ਜਿਲੀ</button>
  <button type="button" class="btn btn-primary">ਚੰਗਾਨ</button>
  <button type="button" class="btn btn-primary">ਹੰਗਕਿਆਂ</button>
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ

ਨਿਊਨ ਬਟਨ ਗਰੁੱਪ ਅਤੇ ਪੈਨਡੌਨ ਮੈਨੂ

ਨਿਊਨ ਬਟਨ ਗਰੁੱਪ, ਪੈਨਡੌਨ ਮੈਨੂ ਬਣਾ ਸਕਦੇ ਹਨ (ਤੁਸੀਂ ਬਾਅਦ ਦੇ ਚੈਪਟਰਾਂ ਵਿੱਚ ਪੈਨਡੌਨ ਮੈਨੂ ਬਾਰੇ ਜਾਣਕਾਰੀ ਮਿਲੇਗੀ):

ਉਦਾਹਰਣ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ਹਵਾਇਵੇ</button>
  <button type="button" class="btn btn-primary">ਦਜੀਯੰਗ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">ਮੀਟਾਓ</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">ਮੋਬਾਈਲ</a>
      <a class="dropdown-item" href="#">ਟੇਬਲੇਟ</a>
    </div>
  </div>
</div>

ਆਪਣੇ ਹੀ ਮੰਨੋ ਕਰੋ