دکمه‌ها

دکمه‌های پیش‌فرض بوت استرپ و اجزای دکمه‌های توسعه‌یافته سفارشی و تغییر شکل داده شده
دکمه‌های پیش‌فرض بوت استرپ
پیشفرض بوت استرپ:
<button class="btn btn-primary" type="button">اولیه</button>
<button class="btn btn-secondary" type="button">ثانویه</button>
<button class="btn btn-success" type="button">موفقیت</button>
<button class="btn btn-danger" type="button">خطر</button>
<button class="btn btn-warning" type="button">اخطار</button>
<button class="btn btn-info" type="button">اطلاعات</button>
<button class="btn btn-light" type="button">روشن</button>
<button class="btn btn-dark" type="button">تیره</button>
<button class="btn btn-link" type="button">لینک</button>
button.btn.btn-primary(type='button') اولیه
button.btn.btn-secondary(type='button') ثانویه
button.btn.btn-success(type='button') موفقیت
button.btn.btn-danger(type='button') خطر
button.btn.btn-warning(type='button') اخطار
button.btn.btn-info(type='button') اطلاعات
button.btn.btn-light(type='button') روشن
button.btn.btn-dark(type='button') تیره
button.btn.btn-link(type='button') لینک
استایل‌های پیش‌فرض دکمه حالت خاص بوت استرپ به گونه‌ای طراحی شده‌اند که با تم SB Admin Pro مطابقت داشته باشد.
دورخط دار پیشفرض بوت استرپ:
<button class="btn btn-outline-primary" type="button">اولیه</button>
<button class="btn btn-outline-secondary" type="button">ثانویه</button>
<button class="btn btn-outline-success" type="button">موفقیت</button>
<button class="btn btn-outline-danger" type="button">خطر</button>
<button class="btn btn-outline-warning" type="button">اخطار</button>
<button class="btn btn-outline-info" type="button">اطلاعات</button>
<button class="btn btn-outline-light" type="button">روشن</button>
<button class="btn btn-outline-dark" type="button">تیره</button>
<button class="btn btn-outline-link" type="button">لینک</button>
button.btn.btn-outline-primary(type='button') اولیه
button.btn.btn-outline-secondary(type='button') ثانویه
button.btn.btn-outline-success(type='button') موفقیت
button.btn.btn-outline-danger(type='button') خطر
button.btn.btn-outline-warning(type='button') اخطار
button.btn.btn-outline-info(type='button') اطلاعات
button.btn.btn-outline-light(type='button') روشن
button.btn.btn-outline-dark(type='button') تیره
button.btn.btn-outline-link(type='button') لینک
دکمه‌های دورخط دار از پیشفرض های بوت استرپ است
رنگ بندی سفارشی
رنگ های دکمه های غیر متنی:
<button class="btn btn-red" type="button">قرمز</button>
<button class="btn btn-orange" type="button">نارنجی</button>
<button class="btn btn-yellow" type="button">زرد</button>
<button class="btn btn-green" type="button">سبز</button>
<button class="btn btn-teal" type="button">سبز روشن</button>
<button class="btn btn-cyan" type="button">فیروزه ای</button>
<button class="btn btn-blue" type="button">آبی</button>
<button class="btn btn-indigo" type="button">نیلی آبی</button>
<button class="btn btn-purple" type="button">بنفش</button>
<button class="btn btn-pink" type="button">صورتی</button>
button.btn.btn-red(type='button') قرمز
button.btn.btn-orange(type='button') نارنجی
button.btn.btn-yellow(type='button') زرد
button.btn.btn-green(type='button') سبز
button.btn.btn-teal(type='button') سبز روشن
button.btn.btn-cyan(type='button') فیروزه ای
button.btn.btn-blue(type='button') آبی
button.btn.btn-indigo(type='button') نیلی آبی
button.btn.btn-purple(type='button') بنفش
button.btn.btn-pink(type='button') صورتی
به طور پیش فرض، دکمه های بوت استرپ از نظر معنایی نامگذاری می شوند. ما فریمورک Bootstrap را گسترش داده‌ایم تا رنگ‌های غیر متنی را در بر بگیرد.
رنگ های دکمه های دورخط دار غیر متنی: :
<button class="btn btn-outline-red" type="button">قرمز</button>
<button class="btn btn-outline-orange" type="button">نارنجی</button>
<button class="btn btn-outline-yellow" type="button">زرذ</button>
<button class="btn btn-outline-green" type="button">سبز</button>
<button class="btn btn-outline-teal" type="button">سبز روشن</button>
<button class="btn btn-outline-cyan" type="button">فیروزه ای</button>
<button class="btn btn-outline-blue" type="button">آبی</button>
<button class="btn btn-outline-indigo" type="button">نیلی آبی</button>
<button class="btn btn-outline-purple" type="button">بنفش</button>
<button class="btn btn-outline-pink" type="button">صورتی</button>
button.btn.btn-outline-red(type='button') قرمز
button.btn.btn-outline-orange(type='button') نارنجی
button.btn.btn-outline-yellow(type='button') زرذ
button.btn.btn-outline-green(type='button') سبز
button.btn.btn-outline-teal(type='button') سبز روشن
button.btn.btn-outline-cyan(type='button') فیروزه ای
button.btn.btn-outline-blue(type='button') آبی
button.btn.btn-outline-indigo(type='button') نیلی آبی
button.btn.btn-outline-purple(type='button') بنفش
button.btn.btn-outline-pink(type='button') صورتی
کلاس‌های رنگی غیر متنی SB Admin Pro با دکمه‌های طرح کلی نیز کار می‌کنند!
دکمه‌های سفارشی آیکن دار
آیکن دار (Feather Icons):
<button class="btn btn-red btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-orange btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-yellow btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-green btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-teal btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-cyan btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-blue btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-indigo btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-purple btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-pink btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
button.btn.btn-red.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-orange.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-yellow.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-green.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-teal.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-cyan.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-blue.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-indigo.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-purple.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-pink.btn-icon(type='button')
    i(data-feather='feather')
مؤلفه دکمه آیکون سفارشی ما به طور پیش فرض دایره ای است و در صورت استفاده با Feather Icons که با این موضوع ارائه می شود، عالی به نظر می رسد.
آیکن دار (Font Awesome Icons):
<button class="btn btn-red btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-orange btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-yellow btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-green btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-teal btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-cyan btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-blue btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-indigo btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-purple btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-pink btn-icon" type="button">
    <i class="fas fa-flag"></i>
</button>
button.btn.btn-red.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-orange.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-yellow.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-green.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-teal.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-cyan.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-blue.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-indigo.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-purple.btn-icon(type='button')
    i.fas.fa-flag
button.btn.btn-pink.btn-icon(type='button')
    i.fas.fa-flag
دکمه‌های آیکن دار با Font Awesome خیلی خوب به نظر می رسد.
دکمه‌های تک حرفی:
<button class="btn btn-red btn-icon" type="button">0 </button>
<button class="btn btn-orange btn-icon" type="button">1</button>
<button class="btn btn-yellow btn-icon" type="button">2</button>
<button class="btn btn-green btn-icon" type="button">3</button>
<button class="btn btn-teal btn-icon" type="button">4</button>
<button class="btn btn-cyan btn-icon" type="button">5</button>
<button class="btn btn-blue btn-icon" type="button">6</button>
<button class="btn btn-indigo btn-icon" type="button">7</button>
<button class="btn btn-purple btn-icon" type="button">8</button>
<button class="btn btn-pink btn-icon" type="button">9</button>
button.btn.btn-red.btn-icon(type='button') 0
button.btn.btn-orange.btn-icon(type='button') 1
button.btn.btn-yellow.btn-icon(type='button') 2
button.btn.btn-green.btn-icon(type='button') 3
button.btn.btn-teal.btn-icon(type='button') 4
button.btn.btn-cyan.btn-icon(type='button') 5
button.btn.btn-blue.btn-icon(type='button') 6
button.btn.btn-indigo.btn-icon(type='button') 7
button.btn.btn-purple.btn-icon(type='button') 8
button.btn.btn-pink.btn-icon(type='button') 9
دکمه‌های آیکن دار دکمه های نماد از ارتفاع و عرض ثابت استفاده می کنند پس شما میتوانید از متن های کوتاه 1 حرفی یا 2 حرفی استفاده کنید
دکمه‌های آیکن دار دورخط دار:
<button class="btn btn-outline-red btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-orange btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-yellow btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-green btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-teal btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-cyan btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-blue btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-indigo btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-purple btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
<button class="btn btn-outline-pink btn-icon" type="button">
    <i data-feather="feather"></i>
</button>
button.btn.btn-outline-red.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-orange.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-yellow.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-green.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-teal.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-cyan.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-blue.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-indigo.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-purple.btn-icon(type='button')
    i(data-feather='feather')
button.btn.btn-outline-pink.btn-icon(type='button')
    i(data-feather='feather')
مؤلفه دکمه آیکون سفارشی ما به طور پیش فرض دایره ای است و در صورت استفاده با Feather Icons که با این موضوع ارائه می شود، عالی به نظر می رسد.
دکمه‌های شفاف سفارشی
<!-- Button Transparent (Light) -->
<button class="btn btn-transparent-light" type="button">...</button>

<!-- Button Transparent (Dark) -->
<button class="btn btn-transparent-dark" type="button">...</button>

<!-- Button Transparent (10% White Opacity) -->
<button class="btn btn-white-10" type="button">...</button>
// Button Transparent (Light)
button.btn.btn-transparent-light(type='button') ...

// Button Transparent (Dark)
button.btn.btn-transparent-dark(type='button') ...

// Button Transparent (10% White Opacity)
button.btn.btn-white-10(type='button') ...
جزء دکمه شفاف ما برای استفاده به جای رنگ دکمه در دسترس است. این یک ظاهر طراحی شده رنگ با سایر گزینه های سفارشی سازی موجود، از جمله دکمه های نماد، کار می کند.
اندازه ها
تنظیمات اندازه دکمه:
<button class="btn btn-primary btn-xs">خیلی کوچک</button>
<button class="btn btn-primary btn-sm">کوچک</button>
<button class="btn btn-primary">پیشفرض</button>
<button class="btn btn-primary btn-lg">بزرگ</button>
<button class="btn btn-primary btn-xl">خیلی بزرگ</button>
button.btn.btn-primary.btn-xs خیلی کوچک
button.btn.btn-primary.btn-sm کوچک
button.btn.btn-primary پیشفرض
button.btn.btn-primary.btn-lg بزرگ
button.btn.btn-primary.btn-xl خیلی بزرگ
اندازه‌های دکمه‌ها از پیش‌فرض‌های Bootstrap گسترش یافته‌اند تا دکمه‌های کوچک و بسیار بزرگ را در بر گیرند.
تنظیمات اندازه دکمه آیکن دار:
<button class="btn btn-primary btn-xs btn-icon">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-primary btn-sm btn-icon">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-primary btn-icon">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-primary btn-lg btn-icon">
    <i class="fas fa-flag"></i>
</button>
<button class="btn btn-primary btn-xl btn-icon">
    <i class="fas fa-flag"></i>
</button>
button.btn.btn-primary.btn-xs.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-sm.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-lg.btn-icon
    i.fas.fa-flag
button.btn.btn-primary.btn-xl.btn-icon
    i.fas.fa-flag
مؤلفه دکمه آیکون سفارشی با همه گزینه های اندازه دکمه موجود سازگار است.
دکمه شبکه اجتماعی
<button class="btn btn-facebook">
    <i class="fab fa-facebook-f"></i> فسبوک
</button>
<button class="btn btn-github">
    <i class="fab fa-github"></i> گیت هاب
</button>
<button class="btn btn-google">
    <i class="fab fa-google"></i> گوگل
</button>
<button class="btn btn-twitter">
    <i class="fab fa-twitter"></i> توییتر
</button>
button.btn.btn-facebook
    i.fab.fa-facebook-f.me-2
    | فسبوک
button.btn.btn-github
    i.fab.fa-github.me-2
    | گیت هاب
button.btn.btn-google
    i.fab.fa-google.me-2
    | گوگل
button.btn.btn-twitter
    i.fab.fa-twitter.me-2
    | توییتر
یک گروه منتخب از برند های محبوب، سبک دکمه های سفارشی را اضافه کرده اند. مثال بالا از برند آیکن های Font Awesome استفاده شده است.
دکمه توسعه داده شده
استفاده از Utility Classs در مقابل نادیده گرفتن متغیرهای SCSS

کلاس های کاربردی یک راه سریع و قدرتمند برای گسترش استایل مولفه دکمه است. به طور خاص، ابزارهای حاشیه، سایه، متن و فاصله به خوبی برای سفارشی کردن یک دکمه کار می کنند.

از کلاس های کاربردی برای تغییر سبک یک دکمه یا گروه کوچکی از دکمه ها استفاده کنید. بهترین راه برای تغییر شکل کلی مولفه دکمه، با حذف متغیرهای SCSS خاص دکمه است.

دور صاف :
کلاس ابزار کمکی .rounded-0 را روی هر دکمه ای اضافه کنید و لبه ها را مربع می کند و در نتیجه یک دکمه مربع ایجاد می شود.
سایه دار:
کلاس کمکی .shadow-sm بر روی هر دکمه ای قرار گیرد یک افکت سایه ظریف به دکمه می دهد. می توانید از .shadow و .shadow-lg هم استفاده کنید که به ترتیب سایه بیشتر و بیشتر می شود.
قرصی:
کلاس کمکی .rounded-pill به هر دکمه اضافه کنید آن دکمه قرصی میشود. توجه: این روی دکمه‌های آیکونی که قبلاً دایره‌ای هستند تأثیری نخواهد داشت.
سفارشی سازی عمیق تر:
ابزارهای Spacing مخصوصاً در هنگام تلاش برای دستیابی به ظاهر و احساس خاصی برای یک دکمه خاص مفید هستند. در مثال بالا، .px-4 ابزار کمکی به منظور ایجاد فضای منفی بیشتر در سمت چپ و راست دکمه به مولفه دکمه اضافه شد.
چندین کلاس کاربردی که با هم استفاده می شوند می توانند ظاهر یک دکمه را به شدت تغییر دهند. این کار فقط در مواردی انجام می شود که فقط یک دکمه یا گروه کوچکی از دکمه ها نیاز به یک سبک خاص دارند. برای تغییر دکمه ها در سطح جهانی، بهتر است متغیرهای SCSS دکمه را لغو کنید.
مستندات بوت استرپ موجود است

دکمه‌ها یک جزء پیش‌فرض هستند که در فریمورک Bootstrap گنجانده شده‌اند. برای اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از دکمه ها در پروژه خود، به صفحه مستندات دکمه های بوت استرپ رسمی مراجعه کنید.

از Bootstrap Buttons Docs دیدن کنید