Bootstrap the buttons of the day (i) _javascript skills

This article mainly explains the style of the button.
1. Options
2. Size
3. Activity status
4. Disabled status
5. HTML tags that can be used as buttons

Options

Use the class listed above to quickly create a button with a style.

 <button type= "button" class= "btn btn-default" >Default</button>
 <button type= "button" class= "btn Btn-primary ">Primary</button>
 <button type=" button "class=" Btn btn-success ">success</button >
 <button type= "button" class= "btn btn-info" >Info</button>
 <button type= "button" class= " BTN btn-warning ">Warning</button>
 <button type=" button "class=" Btn Btn-danger ">danger</ button>
 <button type= "button" class= "Btn Btn-link" > Links </button>

Size
Do you want the buttons to have different sizes? Use the. Btn-lg,. Btn-sm,. Btn-xs to get buttons of different sizes.

<p>
 <button type= "button" class= "btn btn-primary btn-lg" >large button</button>
 <button Type= "button" class= "btn btn-default btn-lg" >large button</button>
</p>
<p>
 < Button type= "button" class= "btn btn-primary" >default button</button> <button type=
 "button" class= " BTN Btn-default ">default button</button>
</p>
<p>
 <button type=" button "class= "Btn btn-primary btn-sm" >small button</button> <button type= "
 button" class= "btn Btn-default-BTN-SM" >small button</button>
</p>
<p>
 <button type= "button" class= "BTN" Btn-primary btn-xs ">extra small button</button> <button type="
 button "class=" btn Btn-default-Btn-xs " >extra Small button</button>
</p>

By adding. Btn-block to the button, you can make it full of the width of the parent node 100%, and the button becomes a block-level element.

<button type= "button" class= "btn btn-primary btn-lg btn-block" >block level button</button>
<button Type= "button" class= "btn btn-default btn-lg btn-block" >block level button</button>

Active state
When the button is active, it behaves as if it is pressed down (deeper background, darker borders, built-in shadows). For the b<button> element, it is implemented by: active. For the <a> element, it is implemented through. Active. However, you can also use a combination of. Active <button> and programmatically make it active.
Button Element
Because active is pseudo state, you do not need to add it, but you can add it when you need to show the same look. Active.

<button type= "button" class= "btn btn-primary btn-lg Active" >primary button</button> <button type=
" Button "class=" btn btn-default btn-lg Active ">Button</button>

LINK element
You can add. Active class for <a>.

<a href= "#" class= "btn btn-primary btn-lg Active" role= button ">primary link</a> <a href=
" # "class=" BTN Btn-default btn-lg Active "role= button" >Link</a>

Can be compared with the button above.

Disabled status
you can render an effect that is not clickable by fading the button's background color by 50%.
Button Element
Add the Disabled property to <button>.

<button type= "button" class= "btn btn-lg btn-primary" disabled= "disabled" >primary
button</button> <button type= "button" class= "btn btn-default btn-lg" disabled= "disabled" >Button</button>

You can put your mouse on the button and click to see the effect.
Cross-browser compatibility

If you add the Disabled property to <button>, Internet Explorer 9 and later browsers will paint the text in the button as gray, with a nasty shadow, and there is no way to fix it.
Link Element
Add. Disabled class for <a>.

<a href= "#" class= "btn btn-primary btn-lg Disabled" role= "button" >primary link</a> <a href=
"#" Class = "BTN btn-default btn-lg Disabled" role= "button" >Link</a>

This is a comparison with the button above.
We use. Disabled as a tool class, just like. Active class, so there is no need to add prefixes.
Link functionality not affected

The class mentioned above simply changes the appearance of the <a> and does not affect functionality. In this document, we disable the default functionality of the link through JavaScript code.

HTML tags that can be used to make buttons
You can add a button class to a <a>, <button>, or <input> element.

 <a class= "btn Btn-default" href= "#" role= "button" >Link</a>
 <button class= "btn btn-default" type= " Submit ">Button</button>
 <input class=" btn btn-default "type=" button "value=" input ">
 < Input class= "btn Btn-default" type= "Submit" value= "Submit" >

Cross-browser performance

As a best practice, we strongly recommend that you use <button> elements whenever possible to ensure a consistent style across browsers.

Go out for other reasons, this Firefox bug makes it impossible for us to set line-height for <input>-based buttons, which causes them to be highly inconsistent with other buttons on Firefox.
The main content of this section is button buttons style, we can be flexible to run these several styles to control on it, I hope to help you learn.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course