دکمه ها
دکمه های پیش فرض
سبک دکمه به در هر چیزی قابل استفاده است به وسیله کلاس .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 |
- [button target="_self" link="#"] Default icon="pencil" [/button]
- [button type="primary" icon="comment" target="_self" link="#"] Primary [/button]
- [button type="info" icon="info-sign" target="_self" link="#"] Info [/button]
- [button type="success" icon="check" target="_self" link="#"] Success [/button]
- [button type="warning" icon="warning" target="_self" link="#"] warning [/button]
- [button type="danger" icon="refresh" target="_self" link="#"] Danger [/button]
- [button type="inverse" icon="trash" target="_self" link="#"] Inverse [/button]
- [button type="link" icon="twitter" target="_self" link="#"] Link [/button]
دکمه های تخت
Default Button Primary Button Success Button Warning Button Inverse Button Info Button Danger Button
- [button type="flat" target="_self" link="#"] Default Button [/button]
- [button type="flat primary" target="_self" link="#"] Primary Button [/button]
- [button type="flat success" target="_self" link="#"] Success Button [/button]
- [button type="flat warning" target="_self" link="#"] Warning Button [/button]
- [button type="flat inverse" target="_self" link="#"] Inverse Button [/button]
- [button type="flat info" target="_self" link="#"] Info Button [/button]
- [button type="flat danger" target="_self" link="#"] Danger Button [/button]
سازگاری مرورگر
IE9 نمی تواند پس زمینه را درست کند در نتیجه این مورد حذف می شود. اکثرا, IE9 در این مورد غیر فعال می باشد. گزینهدکمه
مشکل سایه دارد و امکان برطرف نمودن آن وجود ندارد.
تغییر دهنده اندازه دکمه
آیا می خواهید اندازه دکمه ها را تغییر دهید? این موارد را large
, small
, or mini
برای تغییر سایز استفاده نمایید.
- [button type="primary" size="lg" target="_self" link="#"] Large button [/button]
- [button size="lg" target="_self" link="#"] Large button [/button]
- [button type="primary" target="_self" link="#"] Default button [/button]
- [button target="_self" link="#"] Default button [/button]
- [button type="primary" size="sm" target="_self" link="#"] Small button [/button]
- [button size="sm" target="_self" link="#"] Large Small [/button]
- [button type="primary" size="xs" target="_self" link="#"] Mini button [/button]
- [button size="xs" target="_self" link="#"] Mini button [/button]
ساختن جمعه برای دکمه ها با عرض تمام با اضافه نمودن.btn-block.
- [button type="primary" size="lg" full="block"] Block level button [/button]
- [button size="lg" full="block"] Block level button [/button]
سطح غیر فعال
برای غیر فعال نمودن دکمه این مورد را اضافه نمایید disabled
attribute for <button>
.
- [button type="primary" size="lg" state="disabled"] Primary button [/button]
- [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)