دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۳
  • مرداد

جلسه ۱۰ : طراحی Button در Bootstrap 4

  • دسته‌بندی‌ها :
جلسه ۱۰ : طراحی Button در Bootstrap 4
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

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

      البته ما در بخش های قبل ، به طراحی برخی عناصر Bootstrap 4  طی این دوره ، از جمله طراحی هشدارها در Bootstrap 4 ، پرداختیم. و در بخش های قبل تر نیز، به مباحث مهم دیگری از جمله کار با تصاویر در Bootstrap 4 ، نیز اشاره شد.

      اکنون به سراغ مبحث طراحی Button در Bootstrap 4 ، می رویم.

       

      طراحی Button در Bootstrap 4

      طراحی Button در Bootstrap 4

       

      طراحی Button در Bootstrap 4

      در Bootstrap 4 ، عناصر Button  ، شامل طراحی های گوناگون و متنوعی می باشد.

      طراحی Button در Bootstrap 4

      طراحی Button در Bootstrap 4

      مثال:

      مثال : 

      کلاس ها ی Button ، می تواند در قالب تگ های <a> ، <button> و <input> ، استفاده شود.

      مثال : 

      خط خارجی در Button

      Bootstrap 4 شامل ۸ طراحی برای ویژگی خط خارجی در عناصر Button ، می شود.

       

      خط خارجی در Button

      خط خارجی در Button

      مثال:

      مثال : 

      اندازه Button

      Bootstrap 4 اندازه های مختلف را برای عناصر Button ، در نظر گرفته است.

      اندازه Button

      اندازه Button

      مثال:

      مثال : 

      block کردن Button در Bootstrap 4

      با افزودن کلاس .btn-block ، می توان ، خصوصیت  block را برای عناصر Button ، در Bootstrap 4 ، فراهم کرد.

      block کردن Button در Bootstrap 4

      block کردن Button در Bootstrap 4

      مثال:
      مثال : 

      ویژگی فعال و غیرفعال بودن عناصر Button

      یک عنصر Button ، می تواند با استفاده از طراحی های آماده ی Bootstrap 4 ، بصورت فعال یا غیر فعال قرار بگیرد.

       

      ویژگی فعال و غیرفعال بودن عناصر Button

      ویژگی فعال و غیرفعال بودن عناصر Button

       

      از کلاس .active ، برای فعال کردن ، و از کلاس disabled ، نیز برای غیر فعال کردن عناصر Button ، استفاده می شود.

      نکته: اگر از تگ <a> برای ایجاد Button ، استفاده می کنید . توجه داشته باشید که در این صورت باید از کلاس .disabled ، برای ایجاد Button غیر فعال ، استفاده کنید.

      مثال:

      مثال : 

      کلام آخر

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

      QR:  جلسه ۱۰ : طراحی Button در Bootstrap 4
      به اشتراک بگذارید