دکمه‌های Bootstrap 5

سبک دکمه‌ها

Bootstrap 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 پشتیبانی نمی‌کند، بنابراین باید از .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>

شما می‌توانید شخصاً امتحان کنید