Bootstrap (vi): button

1. Labels or elements that can be used as buttons

Although button classes can be applied to <a> and <button> elements, the navigation and navigation bar components only support <button> elements.

If the <a> element is used as a button and is used to trigger certain features on the current page instead of linking other pages or links to other parts of the current page, be sure to set the role= button property for it.

<aclass= "Btn Btn-default"href="#"role= "button">Link</a><Buttonclass= "Btn Btn-default"type= "Submit">Button</Button><inputclass= "Btn Btn-default"type= "button"value= "Input"><inputclass= "Btn Btn-default"type= "Submit"value= "Submit">

2. Button style

<Buttontype= "button"class= "Btn Btn-default">(Default Style)</Button><Buttontype= "button"class= "Btn btn-primary">(preferences) Primary</Button><Buttontype= "button"class= "Btn btn-success">(success) Success</Button><Buttontype= "button"class= "Btn btn-info">(General information) info</Button><Buttontype= "button"class= "Btn btn-warning">(warning) Warning</Button><Buttontype= "button"class= "Btn Btn-danger">(Danger) Danger</Button><Buttontype= "button"class= "Btn Btn-link">(link) Link</Button>

3. Button size

Do I need to have a different size for the button? use .btn-lg , .btn-sm or you can get buttons of different sizes .btn-xs .

<P>  <Buttontype= "button"class= "btn btn-primary btn-lg">(large button) Large button</Button>  <Buttontype= "button"class= "btn btn-default btn-lg">(large button) Large button</Button></P><P>  <Buttontype= "button"class= "Btn btn-primary">Default button</Button>  <Buttontype= "button"class= "Btn Btn-default">Default button</Button></P><P>  <Buttontype= "button"class= "btn btn-primary btn-sm">(small button) Small button</Button>  <Buttontype= "button"class= "btn btn-default btn-sm">(small button) Small button</Button></P><P>  <Buttontype= "button"class= "btn btn-primary btn-xs">(ultra-small size) Extra small button</Button>  <Buttontype= "button"class= "btn btn-default btn-xs">(ultra-small size) Extra small button</Button></P>

Adding a class to a button stretches it to the width of the parent element 100%, and the button becomes a block-level (block) element. .btn-block The specific example below ↓

<P>  <Buttontype= "button"class= "btn btn-primary btn-lg btn-block">(large button) Large button</Button>  <Buttontype= "button"class= "btn btn-default btn-lg btn-block">(large button) Large button</Button></P><P>  <Buttontype= "button"class= "Btn btn-primary">Default button</Button>  <Buttontype= "button"class= "Btn Btn-default">Default button</Button></P><P>  <Buttontype= "button"class= "btn btn-primary btn-sm">(small button) Small button</Button>  <Buttontype= "button"class= "btn btn-default btn-sm">(small button) Small button</Button></P><P>  <Buttontype= "button"class= "btn btn-primary btn-xs">(ultra-small size) Extra small button</Button>  <Buttontype= "button"class= "btn btn-default btn-xs">(ultra-small size) Extra small button</Button></P>

Bootstrap (vi): button