- عناصر
- دکمه ها
پیش فرض
کد<!-- default --> <button type="button" class="btn btn-primary">Primary</button> <!-- outline --> <button type="button" class="btn btn-outline-primary">Primary</button>
گرد شده
کد<!-- default circle--> <button type="button" class="btn btn-primary rounded-full">Primary</button> <!-- outline circle --> <button type="button" class="btn btn-outline-primary rounded-full">Primary</button>
جامد
کد<!-- primary --> <button type="button" class="btn btn-primary">Primary</button> <!-- info --> <button type="button" class="btn btn-info">Info</button> <!-- success --> <button type="button" class="btn btn-success">Success</button> <!-- warning --> <button type="button" class="btn btn-warning">Warning</button> <!-- danger --> <button type="button" class="btn btn-danger">Danger</button> <!-- secondary --> <button type="button" class="btn btn-secondary">Secondary</button> <!-- dark --> <button type="button" class="btn btn-dark">Dark</button>
توخالی
کد<!-- outline-primary --> <button type="button" class="btn btn-outline-primary">Primary</button> <!-- outline-info --> <button type="button" class="btn btn-outline-info">Info</button> <!-- outline-success --> <button type="button" class="btn btn-outline-success">Success</button> <!-- outline-warning --> <button type="button" class="btn btn-outline-warning">Warning</button> <!-- outline-danger --> <button type="button" class="btn btn-outline-danger">Danger</button> <!-- outline-secondary --> <button type="button" class="btn btn-outline-secondary">Secondary</button> <!-- outline-dark --> <button type="button" class="btn btn-outline-dark">Dark</button>
سایز دکمه ها
کد<!-- large --> <button type="button" class="btn btn-primary btn-lg">Primary</button> <!-- default --> <button type="button" class="btn btn-info">Info</button> <!-- small success --> <button type="button" class="btn btn-success btn-sm">Success</button> <!-- small warning --> <button type="button" class="btn btn-warning btn-sm">Warning</button>
دکمه با آیکن
کد
<!-- left icon -->
<button type="button" class="btn btn-primary">
<svg> ... </svg> Left
</button>
<!-- right icon -->
<button type="button" class="btn btn-warning rounded-full">
Right
<svg> ... </svg>
</button>
<!-- icon -->
<button type="button" class="btn btn-danger">
<svg> ... </svg>
</button>
<!-- circle icon -->
<button type="button" class="btn btn-dark w-10 h-10 p-0 rounded-full">
<svg> ... </svg>
</button>
دکمه سراسری
کد<!-- primary --> <button type="button" class="btn btn-primary w-full">Button</button> <!-- info --> <button type="button" class="btn btn-info w-full">Button</button> <!-- success --> <button type="button" class="btn btn-success w-full">Button</button>
© . تمام حقوق مادی و معنوی محفوظ است.