按钮
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 |
Default icon="pencil" Primary Info Success warning Danger Inverse Link
Flat buttons
Default Button Primary Button Success Button Warning Button Inverse Button Info Button Danger 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.
Large button Large button Default button Default button Small button Large Small Mini button Mini button
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
Block level button Block level button
Disabled state
For disabled buttons, add the state=disabled class to links and the disabled attribute for <button> elements.
Primary 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)