Every day, Bootstrap must learn the button (1) _ javascript skills

Every day, Bootstrap is a required button. This article describes the most commonly used button styles. If you are interested, refer to the button styles described in this article.
1. Option
2. Dimensions
3. Activity Status
4. Disabled
5. Html tags for buttons

Option

You can use the class listed above to quickly create a button with a style.

 Default Primary Success Info Warning Danger Link

Dimensions
Do I need to make the buttons have different sizes? Buttons of different sizes can be obtained using. btn-lg,. btn-sm, And. btn-xs.

 Large button Large button
 Default button Default button
 Small button Small button
 Extra small button Extra small button

You can add a. btn-block to the button to fill it with the 100% width of the parent node, and change the button to a block-level element.

Block level buttonBlock level button

Activity Status
When the button is active, it is pressed (the background is deeper, the border is deeper, and the built-in shadow ). For BElements are implemented through: active. Elements are implemented through. active. However, you can also use. activeAnd make it active by programming.
Button Element
Because: active is a pseudo State, you do not need to add it, but you can add. active when you need to show the same appearance.

Primary buttonButton

Link Element
You can add. active class.

Primary linkLink

It can be compared with the button above.

Disabled
By fading the background color of the button to 50%, the unclickable effect can be displayed.
Button Element
IsAdd the disabled attribute.

Primary buttonButton

You can place the cursor over the button and click to view the effect.
Cross-browser compatibility

IfWhen the disabled attribute is added, Internet Explorer 9 and earlier will render the text in the button as gray and have a disgusting shadow. There is no solution yet.
Link Element
To add. disabled class.

Primary linkLink

This is a comparison with the above button.
We use. disabled as the tool class, just like. active class, so no prefix is required.
The link function is not affected.

The class mentioned above only changes the appearance and does not affect the function. In this document, we use JavaScript code to disable the default function of the link.

Html tags that can be used as buttons
Can be,

OrAdd element button class.

 Link 

Button

Cross-browser Performance

As a best practice, we strongly recommend that you useTo ensure consistent style across browsers.

For other reasons, this Firefox bug makes us unableThe button of the tag is set line-height, which causes them to be different from the height of other buttons on Firefox.
This section describes the style of the button. You can flexibly run these styles to control them. I hope this will help you learn.