logo1

دکمه ها

دکمه های پیش فرض

سبک دکمه به در هر چیزی قابل استفاده است به وسیله کلاس .btn . اگر چه شما می توانید این موارد را تنها برای گزینه های<a> وcode><button> استفاده نمایید.

نمونه: گزینه icon="user" و نام آیکون هست "fa-user".

شما می توانید تمام نمونه را در- Font Awesome 4.0.3
دکمه نوع آیکن توضیحات
Default pencil Standard gray button with gradient
Primary primary comment Provides extra visual weight and identifies the primary action in a set of buttons
Info info info-circle Used as an alternative to the default styles
Success success check Indicates a successful or positive action
Warning warning warning Indicates caution should be taken with this action
Danger danger refresh Indicates a dangerous or potentially negative action
Inverse inverse trash-o Alternate dark gray button, not tied to a semantic action or use
Link link twitter Deemphasize a button by making it look like a link while maintaining button behavior
  1. [button target="_self" link="#"] Default icon="pencil" [/button]
  2. [button type="primary" icon="comment" target="_self" link="#"] Primary [/button]
  3. [button type="info" icon="info-sign" target="_self" link="#"] Info [/button]
  4. [button type="success" icon="check" target="_self" link="#"] Success [/button]
  5. [button type="warning" icon="warning" target="_self" link="#"] warning [/button]
  6. [button type="danger" icon="refresh" target="_self" link="#"] Danger [/button]
  7. [button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button]
  8. [button type="link" icon="twitter" target="_self" link="#"] Link [/button]

دکمه های تخت

  1. [button type="flat" target="_self" link="#"] Default Button [/button]
  2. [button type="flat primary" target="_self" link="#"] Primary Button [/button]
  3. [button type="flat success" target="_self" link="#"] Success Button [/button]
  4. [button type="flat warning" target="_self" link="#"] Warning Button [/button]
  5. [button type="flat inverse" target="_self" link="#"] Inverse Button [/button]
  6. [button type="flat info" target="_self" link="#"] Info Button [/button]
  7. [button type="flat danger" target="_self" link="#"] Danger Button [/button]

سازگاری مرورگر

IE9 نمی تواند پس زمینه را درست کند در نتیجه این مورد حذف می شود. اکثرا, IE9 در این مورد غیر فعال می باشد. گزینهدکمه مشکل سایه دارد و امکان برطرف نمودن آن وجود ندارد.

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

آیا می خواهید اندازه دکمه ها را تغییر دهید? این موارد را large, small, or miniبرای تغییر سایز استفاده نمایید.

  1. [button type="primary" size="lg" target="_self" link="#"] Large button [/button]
  2. [button size="lg" target="_self" link="#"] Large button [/button]
  3.  
  4. [button type="primary" target="_self" link="#"] Default button [/button]
  5. [button target="_self" link="#"] Default button [/button]
  6.  
  7. [button type="primary" size="sm" target="_self" link="#"] Small button [/button]
  8. [button size="sm" target="_self" link="#"] Large Small [/button]
  9.  
  10. [button type="primary" size="xs" target="_self" link="#"] Mini button [/button]
  11. [button size="xs" target="_self" link="#"] Mini button [/button]

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

  1. [button type="primary" size="lg" full="block"] Block level button [/button]
  2. [button size="lg" full="block"] Block level button [/button]

سطح غیر فعال

برای غیر فعال نمودن دکمه این مورد را اضافه نمایید disabled attribute for <button> .

  1. [button type="primary" size="lg" state="disabled"] Primary button [/button]
  2. [button size="lg" state="disabled"] Button [/button]

گزینه های سفارشی سازی / ویژگی‌ها

  • type : حالت و سبک نمایشی قالبprimary, info, success, warning, danger, inverse, link, flat)
  • icon : اضافه نمودن آیکون ها Icons section) here.
  • size : سایز های موجود ( xs, sm, default, lg)
  • full : پر کردن تمام عرض
  • target : هدف لینک(eg. target="_blank" باز کردن لینک در پنجره جدید)
  • state :غیر فعال کردن دکمه ( true, disabled)

ارسال پیغام

  ایمیل ارسال نشد !   Your email has been sent.
بالا