در بوت استرپ میتوان از button برای ایجاد دکمه استفاده کرد.
دکمه های میتوانند کلاس های مختص به خود را بگیرند و هر کدام ویژگی مختص به خود مانند رنگی شدن دکمه , لینک دار بودن , تغیر اندازه و... را دارند .
ابتدا برای ایجاد دکمه در بوت استرپ باید از تگی به نام <button> استفاده کرد و همچنین کلاسی به نام .btn به خود بگیرد :
<button type = “button” class=”btn”> click </button>
دکمه ها میتواند رنگ های موجود و تعریف شده در بوت استرپ را با کلاس رنگ ها به خود اختصاص دهند :
Btn-dark/ btn-danger / btn-warning / .btn-info / .btn-primary / .btn-success /
که مدل کد نویسی آن به صورت زیر است :
<button type = “ button” class=”btn btn-info”> click </button>
دکمه ها میتوانند این قابلیت را داشته باشند که تا با کلیک روی آن به ادرس مورد نظر ارجاع داده شوند همچنین باید از کلاسی به نام .btn-link نیز استفاده شود.
<button type=”button” class=”btn btn-link”>
برای اینکه همچین قابلیتی به دکمه خود اضافه کنیم باید value = “submit” به داخل تگ button اضافه شود.
<button type=”button” class=”btn btn-link” value = “submit”>
اگر بخواهیم دکمه مورد نظر رنگی نداشته باشد و به صورت پیش فرض برای آن رنگ تعیین شود باید از کلاسی به نام btn-outline استفاده شود :
<button type=”button” class=”btn btn-outline-info > click </button>
اگر بخواهیم باکس دکمه مورد نظر را اندازه آن را تغییر دهیم میتوان از 4 کلاس .btn-sm / .btn-md / .btn-lg / .btn-xl استفاده کرد.
<button type=”button” class=”btn btn-info btn-sm > click </button>
همچینین اگر بخواهیم دکمه مد نظر حداکثر پهنا خود را داشته باشد باید از کلاسی به نام btn-block استفاده شود
دکمه ایجاد شده را اگر بخواهیم به حالت فعال و اکتیو و یا حالت غیر فعال در اوریم باید از active به عنوان دکمه فعال و پویا و از کلاس .disable به حالت کم رنگتر که به معنی این است که دکمه مورد نظر فعال نیست استفاده کرد
که روش کار به این صورت است که ابتدا یک div ایجاد میکنیم که در آن کلاسی به نام .btn-group را استفاده میکنیم و سپس درون این تگ آن دکمه هایی را که میخواهیم گروه شوند را ذکر میکنیم:
<div class = “ btn-group”>
<button type = “ button” class=”btn btn-info”> click 1 </button>
<button type = “ button” class=”btn btn-info”> click 2 </button>
</div>
برای تغییر اندازه این گونه دکمه ها میتواند از 4 کلاس :
.btn-group-sm /
.btn-group-md /
.btn-group-lg /
.btn-group-xl /
