我的购物车
(0)个产品 - ¥:0.00
你的购物车没有任何物品!

按钮

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

ButtonTypeIconDescription
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)

收藏
0个人 收藏

联系我们

  • icon
    地址:广西南宁市良庆区银海大道138号
  • icon
    电话 : 18260984219
Top