بوت اسٹرپ 5 دکھانے والا

بٹن طرح

بوت اسٹپ 5 مختلف طرح کے بٹن فراہم کرتا ہے:

مثال

<button type="button" class="btn">بنیادی</button>
<button type="button" class="btn btn-primary">پرامن</button>
<button type="button" class="btn btn-secondary">دوسری مرتبه</button>
<button type="button" class="btn btn-success">موفقیت</button>
<button type="button" class="btn btn-info">اطلاعات</button>
<button type="button" class="btn btn-warning">اخطار</button>
<button type="button" class="btn btn-danger">خطرناک</button>
<button type="button" class="btn btn-dark">کامرنگ</button>
<button type="button" class="btn btn-light">نوازش</button>
<button type="button" class="btn btn-link">لنگ</button>

نفس خود سے کوشش کریئن

بٹن کلاس قابل استعمال ہیں <a>،<button> یا <input> عنصر:

مثال

<a href="#" class="btn btn-success">لنگ بٹن</a>
<button type="button" class="btn btn-success">بٹن</button>
<input type="button" class="btn btn-success" value="وہب بٹن">
<input type="submit" class="btn btn-success" value="پیشکش بٹن">
<input type="reset" class="btn btn-success" value="ریست بٹن">

نفس خود سے کوشش کریئن

چرا ما در ویژگی href لینک یک # می‌نویسیم؟

چون ما هیچ صفحه‌ای برای لینک دادن نداریم و نمی‌خواهیم پیام "404" دریافت کنیم، پس از # به عنوان لینک استفاده می‌کنیم. در زندگی واقعی، این باید URL واقعی صفحه "جستجو" باشد.

پیرامون دکمه

Bootstrap 5 همچنین هشت دکمه‌های کناره/پیرامون را ارائه می‌دهد.

وقتی موس را روی آن‌ها حرکت دهید، می‌توانید تأثیر "معلق" اضافی را ببینید:

مثال

<button type="button" class="btn btn-outline-primary">اصلی</button>
<button type="button" class="btn btn-outline-secondary">دومین</button>
<button type="button" class="btn btn-outline-success">موفقیت</button>
<button type="button" class="btn btn-outline-info">اطلاعات</button>
<button type="button" class="btn btn-outline-warning">اخطار</button>
<button type="button" class="btn btn-outline-danger">خطرناک</button>
<button type="button" class="btn btn-outline-dark">تیره</button>
<button type="button" class="btn btn-outline-light text-dark">نسبتاً روشن</button>

نفس خود سے کوشش کریئن

اندازه دکمه

برای دکمه‌های بزرگ استفاده می‌شود .btn-lg کلاس، برای دکمه‌های کوچک استفاده می‌شود .btn-sm کلاس:

مثال

<button type="button" class="btn btn-primary btn-lg">بزرگ</button>
<button type="button" class="btn btn-primary">پیش‌فرض</button>
<button type="button" class="btn btn-primary btn-sm">کوچک</button>

نفس خود سے کوشش کریئن

دکمه‌های بلوکی

اگر بخواهید دکمه‌های بلوکی که کل عرض پدر را پوشش می‌دهند ایجاد کنید، لطفاً از آن در عنصر پدر استفاده کنید .d-grid کلاس "helper":

مثال

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">پورا چادر بٹن</button>
</div>

نفس خود سے کوشش کریئن

آپ کا اگر بہت سے بلک ویوی بٹن ہیں تو آپ کرسکتے ہیں .gap-* کلاس ان کے درمیان کی فاصلے کو کنٹرول کرتی ہے:

مثال

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">پورا چادر بٹن</button>
  <button type="button" class="btn btn-primary btn-block">پورا چادر بٹن</button>
  <button type="button" class="btn btn-primary btn-block">پورا چادر بٹن</button>
</div>

نفس خود سے کوشش کریئن

فعال/غیر فعال بٹن

بٹن کو فعال (دباؤ والی حالت میں نمائش) یا غیر فعال (غیر کلک شمات) حالت میں سیٹ کیا جاسکتا ہے:

کلاس .active بٹن کو دباؤ والی حالت میں نمائش کرتی ہے، جبکہ غیر فعال پروپرٹی بٹن کو غیر کلک شمات میں لگاتا ہے۔ لطفاً یاد رکھیئے کہ <a> علامت غیر فعال پروپرٹی کو نہیں مددگار ہوتا، لہذا استعمال کیا جانا چاہئے .disabled کلاس اس کو بصری طور پر غیر فعال طور پر نمائش کرتی ہے。

مثال

<button type="button" class="btn btn-primary active">فعال پرائمری</button>
<button type="button" class="btn btn-primary" disabled>غیر فعال پرائمری</button>
<a href="#" class="btn btn-primary disabled">غیر فعال لنک</a>

نفس خود سے کوشش کریئن

لودر بٹن

آپ بٹن میں بھی "spinner" کا استعمال کرسکتے ہیں، آپ کا BS5 Spinner تعلیم میں مزید معلومات ملے گی:

مثال

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  لوڈنگ..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  لوڈنگ..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  لوڈنگ..
</button>

نفس خود سے کوشش کریئن