دکمه ها در Bootstrap

1396/3/28 علیرضا حاتمی نیا 698

مقدمه:

با سلام و خسته نباشید خدمت شما کاربر محترم وبسایت آموزش برنامه نویسی و طراحی وب 
من علیرضا حاتمی نیا هستم با آموزشی دیگر از فریم ورک محبوب بوت استرپ در خدمت شما هستم. 
در جلسه قبل با آموزش تصاویر در بوتسترپ در خدمت شما بودیم. در این جلسه با آموزش دکمه ها در Bootstrap آشنا خواهید شد.

کاربرد دکمه ها در وب : 

همانطور که می دانید دکمه ها یا buttons در وب یکی از پرکاربردترین اعضای صفحه می باشند. چرا که رویدادهای مهمی چون click و hover روی لینک ها و دکمه ها توسط کاربران اعمال می شوند و نقش بسزایی در لینک دهی صفحات و تعامل کاربران در وبسایت را دارند. دکمه ها معمولا نقش لینک دهی ، ارسال دادهای فرم یا submit ، reset کردن یک فرم، نمایش یا مخفی کردن محتوای صفحه و ... را بر عهده دارند. فریم ورک bootstrap با تعریف چند کلاس ساده این امکان را به شما داده تا دکمه هایی زیبا و پرمعنایی را در صفحه ایجاد کنید. در ادامه با نحوه ساخت دکمه ها در بوت استرپ آشنا می شوید. 

دکمه ها در Bootstrap : 


بوت استرپ امکان ایجاد 7 نوع دکمه مختلف را به شما می دهد : 
 

bootstrap buttons


حالت اصلی دکمه ها در bootstrap توسط کلاس btn تعریف می شود. این کلاس فقط روی تگ های a ، input و  button کار می کند.
در مثال زیر حالت کلی دکمه را برای تگ a تعریف می کنیم : 

<a href="#" class="btn"> button </a>

برای تعریف حالت های خاص دکمه که در تصویر بالا مشاهده می کنید هر یک از کلاس های  زیر را به کلاس btn اضافه می کنیم
1-    default: حالت پیش فرض دکمه می باشد. این دکمه به رنگ خاکستری کمرنگ و با رنگ متن سیاه است که می توانید از این دکمه در موارد دلخواه یا تعریف دکمه جدید استفاده کنید. این دکمه توسط کلاس btn-default به شکل زیر تعریف می شود.

<a href="#" class="btn"> default button </a>

2-    Primary : این دکمه به رنگ آبی پر رنگ با رنگ متن سفید برای ایجاد دکمه در حالت اصلی مورد استفاده قرار می گیرد. این دکمه توسط کلاس btn-primary به شکل زیر ایجاد می گردد. 

<a href="#" class="btn btn-primary"> primary button </a>

3-    Success : این دکمه  با رنگ سبز برای رویدادهای مثبت یا موفقیت آمیز مورد استفاده قرار می گیرد. . این دکمه توسط کلاس btn-success به شکل زیر ایجاد می گردد.

<a href="#" class="btn btn-success"> success button </a>

4-    Info : این دکمه با رنگ آبی کمرنگ برای ایجاد حالت اطلاع رسانی مورد استفاده قرار می گیرد. این دکمه توسط کلاس btn-info به شکل زیر ایجاد می گردد.
 

<a href="#" class="btn btn-info"> info button </a>

5-    Warning: این دکمه با رنگ زرد برای حالت اخطار مورد استفاده می گیرد. این دکمه توسط کلاس btn-warning به شکل زیر ایجاد می گردد.

<a href="#" class="btn btn-warning"> warning button </a>


6-    Danger : این دکمه به رنگ قرمز است و برای ایجاد حالت خطر یا عملیات های غیرقابل بازگشت مورد استفاده قار می گیرد. این دکمه توسط کلاس btn-danger به شکل زیر ایجاد می گردد.

<a href="#" class="btn btn-danger"> danger button </a>


7-    Link: استفاده از btn-link دکمه مورد نظر را به شکل یک پیوند یا یک لینک نمایش می دهد. 

<a href="#" class="btn btn-link"> link button </a>

تغییر اندازه دکمه ها در Bootstrap : 

با اضافه کردن کلاس های زیر به روند بالا شما می توانید از 4 سایز مختلفی که بوت استرپ برای دکمه ها ارائه داده است استفاده کنید. این چهار سایز عبارتند از: .large, medium ,small, extra small
 

bootstrap buttons size

  • btn-lg.
  • btn-md.
  • btn-sm.
  • btn-xs.

در مثال زیر 4 سایز برای 4 دکمه مختلف تعریف کردیم: 
 

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-danger btn-md">Medium</button>
<button type="button" class="btn btn-warning btn-sm">Small</button>
<button type="button" class="btn btn-success btn-xs">XSmall</button>

ایجاده دکمه با عرض کامل در Bootstrap : 

با اضافه کردن کلاس btn-block می توانید عرض دکمه مورد نظر را به اندازه عرض والد خود تغییر دهید.  

bootstrap buttons block

<button type="button" class="btn btn-primary btn-block">Button 1</button>
<button type="button" class="btn btn-success btn-block">Button 2</button>
<button type="button" class="btn btn-danger btn-block">Button 3</button>
<button type="button" class="btn btn-warning btn-block">Button 4</button>

ایجاد دکمه های غیرفعال و فعال در Bootstrap : 

می توان توسط کلاس active یک دکمه را به صورت فشرده شده نمایش داد و همچنین با اضافه کردن کلاس  disabled می توان دکمه را به صورت غیرفعال یا غیرقابل کلیک نمایش داد.  

bootstrap buttons active disabled

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-success disabled">Disabled Primary</button>

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت