Bootstrap < basic seven > button

Anything with a class . BTNElements inherit the default appearance of the rounded gray button. However, Bootstrap provides some options for defining the style of the button, as shown in the following table:

The following styles are available for <a>, <button>, or <input> elements:

class	Description	Example
. btn	Add a basic style to a button	Try
. btn-default	Default/Standard button	Try
. btn-primary	Original button style (not manipulated)	Try
. btn-success	An action that indicates success	Try
. btn-info	This style can be used for buttons to eject information	Try
. btn-warning	A button that requires careful action	Try
. Btn-danger	A button action that represents a dangerous action	Try
. btn-link	Make the button look like a link (still retains the button behavior)	Try
. btn-lg	Make a big button	Try
. btn-sm	Make a small button	Try
. btn-xs	Make an ultra-small button	Try
. btn-block	Block-level button (stretched to the width of parent element 100%)	Try
. Active	button is clicked	Try
. Disabled	Disable button	Try

The following example shows all of the above button class:

<! DOCTYPE html>
The results are as follows:

Button size
The following table lists the classes that get the various size buttons:

 
 
 
  
  
 
   
 
    
Class
 
    
Description
 
   
 
   
 
    
. btn-lg
 
    
This will make the button look larger.
 
   
 
   
 
    
. btn-sm
 
    
This will make the button look small.
 
   
 
   
 
    
. btn-xs
 
    
This will make the button look very small.
 
   
 
   
 
    
. btn-block
 
    
This creates a block-level button that spans the full width of the parent element.
 
   
 
  
 
 
 
The following example shows all of the above button class:
<! DOCTYPE html>Big original Button</button> <button type= "button" class= "btn btn-default btn-lg" >big button.</button></p><p> <button type= "button" class= "Btn btn-primary" >Original button of default size</button> <button type= "button" class= "Btn Btn-default" >Default-sized buttons</button></p><p> <button type= "button" class= "btn btn-primary btn-sm" >Small Original button</button> <button type= "button" class= "btn btn-default btn-sm" >the small button</button></p><p> <button type= "button" class= "btn btn-primary btn-xs" >very Small original button</button> <button type= "button" class= "btn btn-default btn-xs" >very small button.</button></p><p> <button type= "button" class= "btn btn-primary btn-lg Btn-block" >block-level raw button</button> <button type= "button" class= "btn btn-default btn-lg Btn-block" >block-level buttons</button></p></body>
The results are as follows:

Button state
Bootstrap provides a class for activating, disabling, and so on Button state, which is explained in more detail below.
Activation status
When activated, the button is rendered as a pressed appearance (dark background, dark border, shadow).
The following table lists the classes that make button elements and anchor elements active:

 
  
 
  
   
 
    
 
     
Elements
 
     
Class
 
    
 
    
 
     
Button element
 
     
Add the . Active class to show that it is active.
 
    
 
    
 
     
Anchor element
 
     
Add the . Active class to the <a> button to show that it is active.
 
    
 
   
 
 
  
The following example demonstrates this:
<! DOCTYPE html>Default button</button> <button type= "button" class= "btn btn-default btn-lg Active" >Activate button</button></p><p> <button type= "button" class= "btn btn-primary btn-lg" >Original Button</button> <button type= "button" class= "btn btn-primary btn-lg Active" >Activated original button</button></p></body>
The results are as follows:
Disabled state
When you disable a button, its color is dimmed by 50%, and the gradient is lost.
The following table lists the classes that let the button elements and anchor elements be disabled:

 
   
 
  
    
 
     
 
      
Elements
 
      
Class
 
     
 
     
 
      
Button element
 
      
Add the disabled property to the <button> button.
 
     
 
     
 
      
Anchor element
 
      
Add the disabled class to the <a> button.
Note: This class will only change the appearance of <a> and will not change its function. Here, you need to disable the link using custom JavaScript.
 
     
 
    
 
 
   
The following example demonstrates this:
<! DOCTYPE html>Default button</button> <button type= "button" class= "btn btn-default btn-lg" disabled= "Disabled" >Disable button</button></p><p> <button type= "button" class= "btn btn-primary btn-lg" >Original Button</button> <button type= "button" class= "btn btn-primary btn-lg" disabled= "Disabled" >The original button is disabled</button></p><p> <a href= "#" class= "btn btn-default btn-lg" role= "button" >links</a> <a href= "#" class= "btn btn-default btn-lg Disabled" role= "button" >Disable Links</a></p><p> <a href= "#" class= "btn btn-primary btn-lg" role= "button" >original link</a> <a href= "#" class= "btn btn-primary btn-lg Disabled" role= "button" >the original link is disabled</a></p></body>
The results are as follows:

Button Label
You can use the button class on the <a>, <button>, or <input> elements. However, it is recommended that you use the button class on the <button> element to avoid cross-browser inconsistency issues.
The following example demonstrates this:
<! DOCTYPE html>Series Articles:bootstrap< Basic One > CSS Overview
bootstrap< basic two > grid system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > Formsbootstrap< basic six > Form
Bootstrap < basic seven > button