بٹن

بوٹسٹریپ کے حسب ضرورت بٹن اسٹائلز کو فارمز، ڈائیلاگ اور مزید میں ایکشن کے لیے استعمال کریں جس میں ایک سے زیادہ سائز، اسٹیٹس، اور مزید کے لیے سپورٹ ہے۔

مثالیں

بوٹسٹریپ میں کئی پہلے سے طے شدہ بٹن اسٹائلز شامل ہیں، جن میں سے ہر ایک اپنے اپنے معنوی مقصد کو پورا کرتا ہے، جس میں مزید کنٹرول کے لیے کچھ اضافی چیزیں ڈالی جاتی ہیں۔

<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" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" 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"ایک میں شامل کریں اور اپنے بٹنوں میں s کو اسٹائل میں شامل کریں۔ نوٹ کریں کہ آپ ان پٹ سے چلنے والے ایک بٹن یا ان کے گروپ بنا سکتے ہیں۔.btn-group.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>

طریقے