星期六, 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 354337 times Last modified on 星期四, 29 5月 2014 14:43
More in this category: « Columns List Style »

112622 comments

  • Comment Link Sharron 星期一, 26 2月 2018 09:55 posted by Sharron

    Having read this I believed it was rather enlightening. I appreciate you finding the time and effort to
    put this content together. I once again find myself personally spending way too much time both reading and posting
    comments. But so what, it was still worthwhile!

  • Comment Link Jeffery 星期一, 26 2月 2018 09:54 posted by Jeffery

    Can you tell us more about this? I'd love to find out some additional information.

  • Comment Link Raymon 星期一, 26 2月 2018 09:36 posted by Raymon

    First-clasѕ pօst it iѕ definitely. Friend on mine һass
    been seɑrchіng for this info.

  • Comment Link Susan 星期一, 26 2月 2018 09:32 posted by Susan

    Hi outstanding blog! Does running a blog like this require
    a great deal of work? I've virtually no knowledge
    of programming but I had been hoping to start my own blog in the near future.
    Anyhow, if you have any ideas or tips for new blog owners please share.
    I understand this is off subject but I simply had to ask.

    Thank you!

  • Comment Link Foster 星期一, 26 2月 2018 09:27 posted by Foster

    Make sure once you buy home theater system, the DVD player includes a component
    video connection. You are stilll only a flessh and blood person and as quickly
    as you became a star, that is how fast itt could all come crashing documented
    on you. These time based effect pedals work by cteating a copy of the sound made with the guitar, aand then plays back this copy either
    once, a fraction of a second following your original has been played, or by playing back the
    copy more than once, each decreasing slightly in volume.

  • Comment Link Kristofer 星期一, 26 2月 2018 09:20 posted by Kristofer

    Remarkable! Its actually amazing article,
    I have got much clear idea regarding from this post.

  • Comment Link Tandy 星期一, 26 2月 2018 09:19 posted by Tandy

    Are you surprising yourself by a new challenge that you could sing, or lines that
    you could add beauty to. The next step involves keeping the vocal chords zipped but producing the
    high tones with the mouth open to become a whiney tone lastly.
    Hold a communication whilst continually stretching your whole body up, to 1 side,
    towards the opposite side, lunging using the right and then left leg and lastly stretching just your
    spinal muscles.

  • Comment Link Howard 星期一, 26 2月 2018 09:09 posted by Howard

    What's up, yeah this post is reɑlly fastidious ɑnd I
    hаve learne ⅼot of things from it οn the topic of blogging.
    thanks.

  • Comment Link Darrell 星期一, 26 2月 2018 09:07 posted by Darrell

    Thanks for another great article. Where else may just anyone get that
    kind of info in such an ideal means of writing? I have
    a presentation subsequent week, and I'm on the search for such info.

  • Comment Link Jacques 星期一, 26 2月 2018 08:59 posted by Jacques

    Every weekend i used to go to see this site,
    for the reason that i want enjoyment, for the reason that this this website conations genuinely fastidious funny
    data too.

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…