星期六, 23 2月 2013 05:39

Button

Written by 
Rate this item
(0 votes)

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Ex: element icon="user" then name of icons is "fa-user".

You can find the full examples of usage at Font Awesome - Font Awesome 4.0.3
Button Type Icon Description
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]

Flat buttons

[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]

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add size= large, small, or mini for additional sizes.

[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]

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

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

Disabled state

For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.

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

Customization Options / Features

  • type : style of the button. You can combine the following options(primary, info, success, warning, danger, inverse, link, flat)
  • icon : add any mini-icon (from the Icons section) here.
  • size : available sizes ( xs, sm, default, lg)
  • full : the full width of a parent
  • target : link target (eg. target="_blank" will open link in a new window)
  • state : disabled buttons, available ( true, disabled)
Read 67170 times Last modified on 星期四, 29 5月 2014 14:43
More in this category: « Columns List Style »

14775 comments

  • Comment Link Toby 星期四, 19 10月 2017 15:43 posted by Toby

    Ⲛice post. I was checking ϲontinuouslʏ this blog and
    I'm impressed! Very usefᥙl іnformation particularly the last part :)
    I care for such infⲟгmation mսch. I wаs seeking this certain information for a long time.
    Thank you and best of luck.

  • Comment Link Eddy 星期四, 19 10月 2017 15:30 posted by Eddy

    Hey there would you mind letting me know which web host you're utilizing?

    I've loaded your blog in 3 different browsers and I must say this blog
    loads a lot faster then most. Can you recommend a good
    internet hosting provider at a fair price? Kudos, I appreciate it!

  • Comment Link Rachel 星期四, 19 10月 2017 14:19 posted by Rachel

    Very good post! We are linking to this particularly great
    content on our site. Keep up the good writing.

  • Comment Link Stanton 星期四, 19 10月 2017 14:18 posted by Stanton

    The Adidas Jeremy Scott homme Originals by Originals JS
    Panda Bear Black sneaker incorporates a design like no other.

  • Comment Link Santiago 星期四, 19 10月 2017 14:00 posted by Santiago

    At this tіme I am going away to do my breakfaѕt,
    afterward having my breakfast coming yet again to read other news.

  • Comment Link Gay 星期四, 19 10月 2017 13:44 posted by Gay

    Having read this I thought it was rather informative. I appreciate you finding the time and effort to put this
    short article together. I once again find myself personally spending a significant
    amount of time both reading and posting comments.
    But so what, it was still worthwhile!wholesale nhl jerseys from China

  • Comment Link Tayla 星期四, 19 10月 2017 13:20 posted by Tayla

    Hi theгe mates, pleasant paragraph and nice arguments commented here, Ӏ am actually enjoying by these.

  • Comment Link Deangelo 星期四, 19 10月 2017 11:28 posted by Deangelo

    Hello, yes this piece of writing is genuinely good and I have learned
    lot of things from it about blogging. thanks.

  • Comment Link Galen 星期四, 19 10月 2017 09:45 posted by Galen

    I do not even know the way I ended up here, however I thought this publish was good.
    I do not understand who you might be but certainly you are going to a famous blogger if you happen to are
    not already. Cheers!

  • Comment Link Lenore 星期四, 19 10月 2017 09:26 posted by Lenore

    Having read this I believed it was really enlightening.
    I appreciate you spending some time and effort to put this article together.
    I once again find myself personally spending a lot of time both reading and posting
    comments. But so what, it was still worthwhile!

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Newsletter

Quas mattis tenetur illo suscipit, eleifend praesentium impedit!
Top
We use cookies to improve our website. By continuing to use this website, you are giving consent to cookies being used. More details…