مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، استفاده از دکمه ها

آموزش بوت استرپ ، استفاده از دکمه ها

آموزش بوت استرپ ، استفاده از دکمه ها

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

برای تعریف حالت های خاص دکمه که در تصویر بالا مشاهده می کنید هر یک از کلاس های زیر را به کلاس btn اضافه می کنیم.

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

     

     

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

     

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

     

     

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

     

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


     

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

     

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

با اضافه کردن کلاس های زیر به روند بالا شما می توانید از ۴ سایز مختلفی که بوت استرپ برای دکمه ها ارائه داده است استفاده کنید. این چهار سایز عبارتند از:

  • large
  • medium
  • small
  • extra small

برای تعریف آن ها به ترتیب می توانید از کلاس های زیر استفاده کنید:

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

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

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

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

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

 

تاریخ آخرین بروزرسانی : ۵ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.
2نظر برای

آموزش بوت استرپ ، استفاده از دکمه ها


  1. ممنون از مطالب مفید و کاربردی که آموزش می دهید موفق باشید 

  2. ممنون از مطالب مفید و کاربردی که آموزش می دهید موفق باشید 

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.