آریا بوت استرپ | آموزش

کتابخانه بوت استرپ دوگانه چپ چین و راست چین
ارائه شده توسط شرکت توسعه فن آوری آریا وندیداد

آریا بوت استرپ، بر پایه بوت استرپ نسخه 4.4.1

آریا بوت استرپ بوت استرپ راست چین بوت استرپ
arya bootstrap bootstrap-rtl bootstrap
bootstrap 4.4.1 2020-02-02
دکمه ها در بوت استرپ

دکمه ها در بوت استرپ

دکمه های بوت استرپ ابزاری هستند که به صورت پیش فرض در بوت استرپ برای آنها سبک های جذابی با رنگ های متنوع و سایز بندی مختلف تعریف شده است. دکمه های بوت استرپ برای هدف های خاصی مانند ثبت یا ریست کردن یک فرم، نمایش یا مخفی کردن یک مطلب در صفحه وب سایت مورد استفاده قرار می گیرید.
ابزارهای کمکی بوت استرپ 1399/07/22 40 1 پیوند مستقیم

دکمه ها در بوت استرپ
1

انواع دکمه های بوت استرپ در رنگ های مختلف

برای استفاده از دکمه های بوت استرپ باید از تگ  استفاده نمایید

دکمه های بوت استرپ رنگ های مختلفی دارند که معمولا هر رنگ برای طراحان برای عملکرد خاصی به کار می رود. استفاده از دکمه های بوت استرپ مانند تگ های زیر است:

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

 

 

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

ثبت کننده:حسین خزائی تاریخ ثبت:1399/07/22
ویرایش کننده:حسین خزائی تاریخ ویرایش:1399/07/22

موضوع: ابزارهای کمکی بوت استرپ
تعداد بازدید:40


تا کنون دیدگاهی نوشته نشده، اولین نفر باشید که دیدگاهش را بیان می کند.

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.