Button style Can be used 
Button element<button> 
Hyperlink elements<a> 
Button typeinput element <input type="button"> 
Of submission typeinput element <input type="submit"> 
Reset typeinput element <input type="reset">












* Original style button

holdbutton Labels become flat, Generally not used
<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn"> Original style button</button>
* Default button

Colorless button

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-default"> Default button</button>
* Submit button

For submitting data

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-primary"> Submit button</button>
* Success button

Generally used as the last step of a series of operations, For example, the final payment step of shopping cart

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-success"> Success button</button>
* Information button

After clicking, Show more information

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-info"> Information button</button>
* Warning button

Buttons commonly used to modify behavior

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-warning"> Warning button</button>
* Danger button

Buttons commonly used for serious behavior, For example, delete

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-danger"> Danger button</button>
* As a connection

button The tag will behave as a super chain, But it's still abutton Label

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-link"> Show as links</button>
* Bigger button

Eye catching button

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-lg"> Bigger button</button>
* Smaller button

When I can't put it down, Just use a smaller button

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-sm"> Smaller button</button>
* The smallest button

Use this if you can't put it down

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-xs"> The smallest button</button>
* Widescreen button

Occupying the parent container's100%

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn btn-block"> Widescreen button</button>
* Activate status button

Button is in being pressed state, Generally used to display an operation that takes more time, For example, upload a picture

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn active"> Activate status button</button>
* Invalid button

Button in invalid state, Not clickable, For example.2 Red packets in seconds

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn disabled"> Receive a red envelope</button>
* Mixed use of multiple button styles

Multiple button styles can be used together

<!DOCTYPE html> <script src="js/jquery/2.0.0/jquery.min.js"></script> <link
href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script
src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button"
class="btn disabled btn-danger btn-xs"> Hand out red envelopes</button>