دکمه ها


نسخه 1

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

<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-dark">تیره</button>
				<button type="button" class="btn btn-link">لینک دار</button>
				

نسخه 2

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

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

برای استفاده از دکمه هایی با بدون رنگ پس زمینه باید از کلاس .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-left me-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>
				

با آواتار

avatar
<div class="avatar avatar-md z-index-1 position-relative me-2">
					<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
					<!-- Video button -->
					<div class="btn btn-xs btn-round btn-white shadow-sm position-absolute top-50 end-50 translate-middle z-index-9 mb-0"> 
						<i class="fas fa-play"></i>
					</div>
				</div>
				

سایزهای مختلف

<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>
				

دکمه های با عرض کامل

<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>