انواع دکمه های بوت استرپ در رنگ های مختلف
برای استفاده از دکمه های بوت استرپ باید از تگ استفاده نمایید
دکمه های بوت استرپ رنگ های مختلفی دارند که معمولا هر رنگ برای طراحان برای عملکرد خاصی به کار می رود. استفاده از دکمه های بوت استرپ مانند تگ های زیر است:
<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>
<button type="button" class="btn btn-link">Link</button>
عملکرد های دکمه های بوت استرپ
دکمه های بوت استرپ عملکرد های مختلفی دارند مانند ثبت کردن یا ریست کردن یک فرم. برای تعریف این عملکرد ها کافیست که به Type آنها را به Submit (ثبت کردن) یا Reset (ریست کردن) اضافه نمایید مانند دستورات زیر:
<button class="btn btn-primary" type="submit">Button</button>
<button class="btn btn-primary" type="reset">Button</button>
نکته : کللاس های بالا را می توان به تگ های و نیز اضافه نمایید مانند دستوارت زیر :
<a class="btn btn-primary" href="#" role="button">Link</a>
<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">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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
اندازه دکمه ها
اگر سایز دکمه ها برای طراحی وب سایت شما مناسب نبود می توانید با استفاده از کلاس btn-sm دکمه ها را کوچک نمایید یا با کلاس btn-lg سایز آن ها بزرگ تر کنید.
<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
اگر می خواهید که سایز دکمه عرض عنصر والد خود را تماما پر نمایید کافی است که به آن کلاس btn-block را افزود.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
حالت دکمه ها
دکمه های بوت استرپ دو حالت فعال و غیر فعال دارند.
حالت فعال دکمه ها پس زمینه آن ها روشن است و قابل فشردن هستند که پیش فرض دکمه های بوت استرپ روی حالت فعال می باشد اما می توان از کلاس active نیز استفاده نمایید.
<button type="button" class="btn btn-lg btn-primary" active>Primary button</button>
حالت غیر فعال نیز دکمه غیر قابل فشردن است و رنگ پس زمینه آن تیره می شود برای غیر فعال کردن دکمه از کلاس disable استفاده می شود.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
در این آموزش به معرفی دکمه ها در بوت استرپ پرداختیم. برای مشاهده آموزش های دیگر بوت استرپ سایت آریا بوت استرپ را دنبال نمایید.