دکمه ها


نسخه 1

بوت استرپ شامل چندین سبک دکمه از پیش تعریف شده است، که هر کدام هدف و کاربرد خاصی دارد.

<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-danger">خطر</button>
<button type="button" class="btn btn-warning">هشدار</button>
<button type="button" class="btn btn-info">پیغام</button>
<button type="button" class="btn btn-light">روشن</button>
<button type="button" class="btn btn-white">سفید</button>
<button type="button" class="btn btn-dark">تیره</button>
<button type="button" class="btn btn-link">لینک دار</button>

نسخه 2

<a class="btn btn-primary-soft" href="#">پیش فرض</a>
<a class="btn btn-dark-soft" href="#">تیره</a>
<a class="btn btn-light-soft" href="#">روشن</a>
<a class="btn btn-secondary-soft" href="#">تایید</a>
<a class="btn btn-success-soft" href="#">موفق</a>
<a class="btn btn-danger-soft" href="#">خطر</a>
<a class="btn btn-warning-soft" href="#">هشدار</a>
<a class="btn btn-info-soft" href="#">پیغام</a>

کاربردهای مختلف

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

رنگ بندی کادر دکمه

برای استفاده از دکمه هایی با بدون رنگ پس زمینه باید از کلاس .btn-outline-* استفاده کنید.

<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-danger">خطر</button>
<button type="button" class="btn btn-outline-warning">هشدار</button>
<button type="button" class="btn btn-outline-info">پیغام</button>
<button type="button" class="btn btn-outline-light">روشن</button>
<button type="button" class="btn btn-outline-dark">تیره</button>

آیکُن دار گوشه گرد

<a class="btn btn-primary" href="#"><i class="fas fa-info-circle ms-2"></i>پیش فرض</a>
<a class="btn btn-dark" href="#">تیره <i class="fas fa-angle-right ms-2"></i></a>
<a class="btn btn-primary btn-round btn-sm" href="#"><i class="fas fa-play"></i></a>
<a class="btn btn-primary btn-round" href="#"><i class="fas fa-play"></i></a>
<a class="btn btn-primary btn-round btn-lg" href="#"><i class="fas fa-play"></i></a>

بزرگنمایی هنگام Hover

<a class="btn btn-primary btn-round zoom-hover ms-3" href="#"><i class="fas fa-play"></i></a>

گرد با سایه (round، shadow)

<a class="btn btn-round btn-primary-shadow" href="#"><i class="fas fa-play"></i></a>

سایزبندی

<a class="btn btn-primary btn-xs" href="#">کوچک تر</a>
<a class="btn btn-primary btn-sm" href="#">کوچک</a>
<a class="btn btn-primary" href="#">متوسط</a>
<a class="btn btn-primary btn-lg" href="#">بزرگ</a>

وضعیت غیرفعال

برای غیرفعال کردن دکمه میتوانید disabled را به تگ button اضافه کنید.

<button type="button" class="btn btn-lg btn-primary" disabled>پیش فرض</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>تایید</button>

دکمه های غیرفعال شده با استفاده از عنصر <a> کمی متفاوت عمل می کنند:

  • تگ <a> از ویژگی disabled پشتیبانی نمی کند، بنابراین باید کلاس disabled را اضافه کنید تا از نظر بصری غیرفعال به نظر برسد.
  • دکمه های غیرفعال باید دارای ویژگی aria-disabled="true" باشند.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">پیش فرض</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">لینک</a>

با عرض کامل

<div class="d-grid gap-2">
	<button class="btn btn-primary" type="button">دکمه 1</button>
	<button class="btn btn-primary" type="button">دکمه 2</button>
</div>

ترازبندی با d-grid و ریسپانسیو با d-md-block

<div class="d-grid gap-2 d-md-block">
	<button class="btn btn-primary" type="button">دکمه 1</button>
	<button class="btn btn-primary" type="button">دکمه 2</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
	<button class="btn btn-primary me-md-2" type="button">دکمه 1</button>
	<button class="btn btn-primary" type="button">دکمه 2</button>
</div>