Bootstrap provides us with a variety of beautiful buttons, we do not have to write the button on their own style, directly use it to provide us with the class style, used in our buttons, very simple and convenient.
For respect to the original here to post a reference tutorial: http://www.runoob.com/bootstrap/bootstrap-buttons.html. In many of my notes, you may see my www.runoob.com-related URLs, stating here that this is not an ad, I just feel that everyone's work should be respected. This website collects a lot of information, for me to study, I am very grateful, draws lessons from these very good tutorials, I make own summary, inductive knowledge point, facilitates own memory. If you are doing project or study, just need this knowledge, then this article just can help you, then I will be very happy.
Ingenious, using Bootstrap's style to make a table, put some knowledge points in the inside:
| class Style | Description |
|---|---|
| . btn | Rounded gray button, in order to make the button less sharp, our buttons should use this style to get rounded corners, and then overlay the other features. |
| . btn-default | Default/Standard button, white pressed gray. |
| . btn-primary | Original button style (not manipulated), this corresponds to active, he is a button is not manipulated style, and active is the button is clicked when the corresponding style displayed. |
| . btn-success | Indicates a successful action |
| . btn-info | This style can be used for buttons to eject information |
| . btn-warning | A button that requires careful action |
| . Btn-danger | A button operation that represents a dangerous action |
| . btn-link | Make the button look like a link (still retain the button behavior) |
| . btn-lg | Big button |
| . btn-sm | Small button |
| . btn-xs | Super Small button |
| . btn-block | Block-level buttons (stretching to the width of the parent element 100%) |
| . Active | button is clicked, and the button will appear as a pressed appearance (dark background, dark border, shadow) when activated. |
| . Disabled | Disables the button, and the color fades to 50% and loses the gradient. |
The various effects of the button are as follows:
Obviously, the Fillet button ~ Success button is relatively easy to understand, we mainly talk about the original button, activate the button and disable the button.
The original button (btn-primary): refers to a button (the original button, the activation button and the disabled button used the style of the success button), has not been manipulated style, where the performance and its left to the success of the button style is consistent, are not pressed the appearance;
Activate button (. Active): the button is clicked, the style of being pressed, this can be said to be relative to the original button.
Disable button (. Disabled): See the effect is very obvious, compared to the success of the button, color fade, lose the gradient, there is a layer of misty effect, when we hover over the top of the mouse, there will be a red disabled circle, this style is very conducive to user experience.
Attached code:
<!doctype html>
The above is a small set to introduce the detailed bootstrap all kinds of buttons, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
