Button style Can be used for  
Button element <button> 
Hyperchain element <a> 
Button type input element <input type="button"> 
Of submission type input element <input type="submit"> 
Reset type input element <input type="reset">












* Original style button

hold button 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>
* Message 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"> Message 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 a button 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>
* Wide screen button

Occupying the parent container's 100%

<!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"> Wide screen 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 , Non clickable , Like hair 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"> 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>