بٹن

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

مثالیں

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

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

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

نوٹ کریں کہ پہلے سے چیک شدہ بٹنوں کے لیے آپ سے .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>

طریقے