بوت اسپرینگ 5 دکمه گروپ

کورس سفارش:

باتن گروپ

برائسٹپ 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>

خود کارا کوشش کریں

ورقی بلاک سٹیچ گروپ

بلاک سٹیچ 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>

خود کارا کوشش کریں

پارو پارو بلاک سٹیچ گروپ

بلاک سٹیچ کا دفعہ، کثیرین بلاک سٹیچ گروپوں کی موجودگی کی صورت میں، پارو پارو نمودار ہوتا ہے:

مثال

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

خود کارا کوشش کریں