دکمه ها (Buttons)
دکمه های بوت استرپ یعنی دکمه های آماده و رنگی برای انجام کارها. «استایل (Style)» یعنی شکل و رنگ یک عنصر. اینجا خیلی سریع دکمه ها را می سازیم و تغییر می دهیم.
استایل های دکمه
با کلاس پایه .btn شروع کن. سپس یک رنگ مثل .btn-primary اضافه کن.
<button type="button" class="btn">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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
دکمه روی تگ های مختلف
می توانی همین کلاس ها را روی <a>، <button> یا <input> بگذاری.
<a href="#" class="btn btn-success">Link Button</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">
نکته: برای لینک های نمایشی از # استفاده می کنیم تا خطای 404 نیاید.
دکمه های حاشیه دار (Outline)
کلاس های .btn-outline-* فقط کادر رنگی می دهند. برای حالت هاور هم آماده اند.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
اندازه دکمه
با .btn-lg دکمه بزرگ می شود. با .btn-sm کوچک می شود.
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
دکمه تمام عرض (Block)
برای تمام عرض کردن، به والد .d-grid بده. سپس دکمه داخلش را قرار بده.
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
اگر چند دکمه داری، با .gap-* فاصله بینشان را تنظیم کن.
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>
فعال و غیرفعال
کلاس .active دکمه را فشرده نشان می دهد. ویژگی disabled کلیک را می بندد.
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
اسپینر داخل دکمه
«اسپینر (Spinner)» یعنی آیکون چرخانِ درحال بارگذاری. آن را داخل دکمه بگذار.
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
نکته: برای بخش های مرتبط به دکمه ها، صفحه گروه دکمه ها را ببین. همچنین برای نمایش پیام ها کنار هشدارها عالی است. حتی می توانی از دکمه های بوت استرپ به عنوان مرجع داخلی استفاده کنی.
گام های تمرینی
- یک دکمه با
.btnو یک رنگ بساز. - اندازه را با
.btn-lgیا.btn-smعوض کن. - یک دکمه تمام عرض با
.d-gridبساز.
جمع بندی سریع
.btnپایه همه دکمه هاست..btn-*رنگ را تعیین می کند..btn-outline-*فقط کادر رنگی می دهد..btn-lgو.btn-smاندازه را تنظیم می کنند..d-gridبرای دکمه تمام عرض عالی است.