دکمههای Bootstrap 5
- صفحه قبلی پنجره هشدار BS5
- صفحه بعدی گروههای دکمه BS5
سبک دکمهها
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>
- صفحه قبلی پنجره هشدار BS5
- صفحه بعدی گروههای دکمه BS5