بٹن

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

مثالیں

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

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

ٹیکسٹ ریپنگ کو غیر فعال کریں۔

اگر آپ بٹن کے متن کو لپیٹنا نہیں چاہتے ہیں، تو آپ .text-nowrapکلاس کو بٹن میں شامل کر سکتے ہیں۔ Sass میں، آپ $btn-white-space: nowrapہر بٹن کے لیے ٹیکسٹ ریپنگ کو غیر فعال کر سکتے ہیں۔

بٹن ٹیگز

.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اینکر بٹنوں پر سبھی کو غیر فعال کرنے کے لیے کچھ مستقبل کے لیے دوستانہ انداز شامل کیے گئے ہیں ۔ براؤزرز میں جو اس پراپرٹی کو سپورٹ کرتے ہیں، آپ کو غیر فعال کرسر بالکل نظر نہیں آئے گا۔
• استعمال کرنے والے غیر فعال بٹنوں میں معاون ٹیکنالوجیز کے عنصر کی حالت کی نشاندہی کرنے <a>کے لیے خصوصیت شامل ہونی چاہیے ۔aria-disabled="true"
• استعمال کرنے والے غیر فعال بٹنوں میں وصف شامل <a> نہیں ہونا چاہیے ۔href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

لنک کی فعالیت کا انتباہ

ایسے معاملات کا احاطہ کرنے کے لیے جہاں آپ کو hrefانتساب کو غیر فعال لنک پر رکھنا پڑتا ہے، .disabledکلاس s کی pointer-events: noneلنک کی فعالیت کو غیر فعال کرنے کی کوشش کے لیے استعمال کرتی ہے <a>۔ نوٹ کریں کہ یہ CSS پراپرٹی ابھی تک HTML کے لیے معیاری نہیں ہے، لیکن تمام جدید براؤزر اس کی حمایت کرتے ہیں۔ اس کے علاوہ، ایسے براؤزرز میں بھی جو سپورٹ کرتے ہیں pointer-events: none، کی بورڈ نیویگیشن متاثر نہیں ہوتی، مطلب یہ ہے کہ دیکھنے والے کی بورڈ استعمال کرنے والے اور معاون ٹیکنالوجیز کے استعمال کرنے والے اب بھی ان لنکس کو فعال کر سکیں گے۔ اس لیے محفوظ رہنے کے لیے، کے علاوہ aria-disabled="true"، ان لنکس پر ایک وصف بھی شامل tabindex="-1"کریں تاکہ انہیں کی بورڈ فوکس حاصل کرنے سے روکا جا سکے، اور ان کی فعالیت کو مکمل طور پر غیر فعال کرنے کے لیے حسب ضرورت JavaScript کا استعمال کریں۔

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

طریقے