Comprehensive parsing bootstrap form usage (form buttons) _javascript tips

One, multi-label support

General Production button In addition to the use of <button> tag elements, you can also use the <input type= "Submit" > and <a> tags.

Also, when you make a button in the bootstrap frame, you can use it on other tag elements in addition to the label elements that you just mentioned, the only thing you need to be aware of is to add the class name ". Btn" to the label element that makes the button.

<button class= "btn btn-default" type= "button" >button label button </button>
<input type= "Submit" class= " BTN Btn-default "value=" input label button "/>
<a href=" # # "class=" btn btn-default ">a label button </a>
<span class= "BTN btn-default" >span label button </span>
<div class= "btn btn-default" >div label button </div>

Second, custom style

The different button styles in the bootstrap frame are implemented by different class names.

<button class= "btn" type= "button" > Base button .btn</button> <button class= "btn btn-default" button
"> Default button .btn-default</button>
<button class=" btn btn-primary "type=" button "> main button .btn-primary< /button>
<button class= "btn btn-success" type= "button" > Success button .btn-success</button>
< Button class= "btn btn-warning" type= "button" > Warning button .btn-warning</button> <button
"class=" Btn-danger "type= button" > Dangerous buttons .btn-danger</button>
<button class= "btn btn-link" type= "button" > Link button .btn-link</button>

Three, button size

In the bootstrap frame, the size of the button can be customized.

Three class names are provided in the bootstrap framework to control the button size:

<button class= "btn btn-primary btn-lg" type= "button" > Large button .btn-lg</button> <button
"class=" Btn-primary "type=" button > Normal button </button>
<button class= "btn btn-primary btn-sm" type= "button" > Small button .btn-sm</button>

Four, block button

A class name ". Btn-block" is provided in the bootstrap framework. button with this class name allows the button to fill the entire container, and the button will not have any padding and margin values. In practice, this type of button is often called a block button.

<button class= "btn btn-primary btn-lg btn-block" type= "button" > Large button .btn-lg</button> <button
class = "Btn btn-primary btn-block" type= "button" > Normal button </button> <button class= "btn btn-primary btn-sm
Btn-block "type=" button > Small button .btn-sm</button>
<button class= "btn btn-primary btn-xs btn-block" type= "button" > Mini button .btn-xs</button>

Five, button disabled status

In the bootstrap framework, there are two ways to implement a button to disable it:

　　Method 1: Add the Disabled property to the label

　　Method 2: Add the class name "disabled" to the element label

　　The main differences between the two are:

The ". Disabled" style does not prohibit the default behavior of buttons, such as commit and reset behavior.

The way to add a "disabled" property to an element label is to disallow the default behavior of the element.

<button class= "btn btn-primary btn-lg btn-block" type= "button" disabled= "Disabled" > Disable button via Disabled property </button >
<button class= "btn btn-primary btn-block Disabled" type= "button" > Disable button by adding class name disabled </button>

Add a little new knowledge Today:Bootstrap form tips

When making form validation, you should provide a different message. This effect is also provided in the bootstrap framework. A "Help-block" style is used to display the hints in chunks and display at the bottom of the control.

<form role= "Form" > <div class= "form-group has-success has-feedback" > <label class= "Control-label" for= " InputSuccess1 "> Success status </label> <input type=" text "class=" Form-control "id=" InputSuccess1 "placeholder=" Success Status "> <span class=" Help-block > you entered the information is correct </span> <span class= "Glyphicon Glyphicon-ok Form-control-feedback "></span> </div> <div class=" Form-group has-warning has-feedback "> < Label class= "Control-label" for= "inputWarning1" > Warning status </label> <input type= "text" class= "Form-control" id= "InputWarning1" placeholder= "Warning Status" > <span class= "help-block" > Please enter the correct information </span> <span class= " Glyphicon glyphicon-warning-sign form-control-feedback "></span> </div> <div class=" Form-group Has-error has-feedback "> <label class=" Control-label "for=" InputError1 "> Error status </label> <input type=" Text "class=" Form-control "id=" InputError1 placeholder= "error status" > <span class= "Glyphicon glyphicon-remove form-control-feedback "></span> </div> </form>

 

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is a detailed introduction to the Bootstrap Form button, then there are more content will continue to update, I hope you continue to pay attention.