دکمه‌ها در بوت‌استرپ یکی از پرکاربردترین کامپوننت‌ها هستن. می‌تونی با کمک کلاس‌ها به راحتی رنگ، سایز و استایل دکمه‌هات رو تغییر بدی.

📌 1. دکمه ساده (Basic Button)

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

🔹 خروجی شامل دکمه‌هایی با رنگ‌های مختلف میشه.

📌 2. دکمه Outline (حاشیه‌ای)

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

🔹 این دکمه‌ها فقط حاشیه رنگی دارن و داخلشون خالیه.

📌 3. سایز دکمه‌ها

<button type="button" class="btn btn-primary btn-lg">دکمه بزرگ</button>
<button type="button" class="btn btn-secondary btn-sm">دکمه کوچک</button>

📌 4. دکمه Block (تمام عرض)

<button type="button" class="btn btn-success w-100">دکمه تمام عرض</button>

📌 5. دکمه لینک (Button as Link)

<a href="#" class="btn btn-info">لینک به شکل دکمه</a>

📌 6. دکمه غیرفعال (Disabled)

<button type="button" class="btn btn-primary" disabled>غیرفعال</button>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">لینک غیرفعال</a>

📌 7. دکمه با آیکون (Font Awesome یا Bootstrap Icons)

<button type="button" class="btn btn-danger">
  <i class="bi bi-trash"></i> حذف
</button>

✨ خلاصه:

• btn btn-color → رنگ دکمه

• btn-outline-color → دکمه حاشیه‌ای

• btn-lg و btn-sm → تغییر سایز

• w-100 → تمام عرض

• disabled → غیرفعال