پیشفرض

برای دادن یک ظاهر طراحی پیش فرض ، از کلاس .btn استفاده کنید.

.btn-primary

.btn-outline-primary

<button class="btn btn-primary mb-2">اولیه</button>

<button class="btn btn-outline-primary mb-2">اولیه</button>

گردشده

برای گرد کردن دکمه ها از .btn round استفاده کنید.

<button class="btn btn-primary btn-rounded mb-2">اولیه</button>

<button class="btn btn-outline-primary btn-rounded mb-2">اولیه</button>

صاف

از کلاس .btn- * استفاده کرده و به دنبال آن کلاس .btn را بزنید تا دکمه های پیش فرض ایجاد شود.


<!--اولیه-->
<button class="btn btn-primary mb-2">اولیه</button>

<!--اطلاعات-->
<button class="btn btn-info mb-2">اطلاعات</button>

<!--موفقیت-->
<button class="btn btn-success mb-2">موفقیت</button>

<!--خطا-->
<button class="btn btn-warning mb-2">خطا</button>

<!--خطر-->
<button class="btn btn-danger mb-2">خطر</button>

<!--ثانویه-->
<button class="btn btn-secondary mb-2">ثانویه</button>

<!--تاریک-->
<button class="btn btn-dark mb-2">دارک</button>

خارج از خط

برای ایجاد دکمه های طرح بندی ، کلاس .btn-out- * را دنبال کنید و به دنبال آن از کلاس .btn استفاده کنید.


<!--اولیه-->
<button class="btn btn-outline-primary mb-2">اولیه</button>

<!--اطلاعات-->
<button class="btn btn-outline-info mb-2">اطلاعات</button>

<!--موفقیت-->
<button class="btn btn-outline-success mb-2">موفقیت</button>

<!--خطا-->
<button class="btn btn-outline-warning mb-2">خطا</button>

<!--خطر-->
<button class="btn btn-outline-danger mb-2">خطر</button>

<!--ثانویه-->
<button class="btn btn-outline-secondary mb-2">ثانویه</button>

<!--تاریک-->
<button class="btn btn-outline-dark mb-2">دارک</button>

اندازه دکمه

<button class="btn btn-primary mb-4 mr-2 btn-lg">دکمه بزرگ</button>

<button class="btn btn-secondary mb-4 mr-2">دکمه پیش فرض</button>

<button class="btn btn-warning mb-4 mr-2 btn-sm">دکمه کوچک</button>

<button class="btn btn-dark mb-4 mr-2 btn-sm disabled">دکمه غیرفعال</button>

دکمه با آیکون

<button class="btn btn-primary mb-2 mr-2"><svg> ... </svg> چپ</button>

<button class="btn btn-warning mb-2 mr-2 btn-rounded">راست <svg> ... </svg></button>

<button class="btn btn-danger mb-2 mr-2"><svg> ... </svg></button>

<button class="btn btn-dark mb-2 mr-2 rounded-circle"><svg> ... </svg></button>

دکمه های بلوک

لینک 
<button class="btn btn-primary btn-block mb-4 mr-2">دکمه</button>

<input type="submit" class="btn btn-info btn-block mb-4 mr-2" value="ورودی">

<a href="javascript:void(0);" class="btn btn-success btn-block mb-4 mr-2">لینک</a>

© کپی رایت

بومی سازی شده توسط : ایمان پاکروح