Bootstrap css layout buttons _javascript tips

A button is a component that no system can be missing, set to the size, color, status, etc. of the button.

BTN source code
. btn {
 display:inline-block;
 PADDING:6PX 12px;
 margin-bottom:0;
 font-size:14px;
 Font-weight:normal;
 line-height:1.42857143;
 Text-align:center;
 White-space:nowrap;
 Vertical-align:middle;
 -ms-touch-action:manipulation;
  touch-action:manipulation;
 Cursor:pointer;
 -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
   User-select:none;
 Background-image:none;
 border:1px solid transparent;
 border-radius:4px;
}

Button style

Btn-default, Btn-primary, btn-success, Btn-info, btn-warning, Btn-danger, Btn-link

Button size

Btn-xs, BTN-SM, BTN-LG, Btn-block

Source code
. BTN-LG,
btn-group-lg > btn {
 padding:10px 16px;
 font-size:18px;
 line-height:1.3333333;
 Border-radius:6px
}
. BTN-SM,
. btn-group-sm > btn {
 padding:5px 10px;
 font-size:12px;
 line-height:1.5;
 Border-radius:3px
}
. Btn-xs,
. Btn-group-xs > btn {
 padding:1px 5px;
 font-size:12px;
 line-height:1.5;
 border-radius:3px;
}

The width of all the buttons is the length of the text plus the padding value, which is not possible if we need a button that fills the 100% width of the parent container. So there's btn-block.
Btn-block does not shrink according to text or padding and margin values, but rather fills the parent container

Source code
. btn-block {
 display:block;
 width:100%
}
. Btn-block +. Btn-block {
 margin-top:5px;
}
Input[type= "Submit"].btn-block,
input[type= "reset"].btn-block,
input[type= "button"].btn-block {
 width:100%;
}

Multi-label Support

The btn of the relevant elements, not only to support the button element, but also to support a element and input elements

<a class= "btn Btn-default" href= "#" > Links </a>
<button class= "btn Btn-default" type= "Submit" > button </button>
<input class= "btn Btn-default" type= "submit" value= "input Box" >

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.