First contact with the Magic bootstrap form _javascript tips

This article will mainly introduce the use of bootstrap forms.

1.Bootstrap Base Form

Common elements in a form include text-entry boxes, Drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

Let's take a look at a basic form:

<! DOCTYPE html>
 
 

The effect diagram looks like this:

We can also achieve different effects by adding different class names to the form, with the form's specific rules as shown in the following table:

For example:

<form class= "Form-inline" role= "form" >...</form>

2.Bootstrap form Control

1 Input Box Inputs

<form role= "Form" >
 <div class= "Form-group" >
 <!--You must add type types, and you will not get the correct style if you do not specify the type-->
 <input type= "email" class= "Form-control" placeholder= "Enter Email" >
 </div>
</form>

2) Dropdown selection box select

<form role= "Form" >
 <div class= "Form-group" >
 <!--single-line drop-down selection box--> <select class=
 " Form-control ">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
 <div class= "Form-group" >
 <!--Multiline selection box--> <select multiple class=
 " Form-control ">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
</form>

3) Text field textarea

The text field is the same as the original use method, set rows to define its height, and set cols to set its width. However, you do not need to set the Cols property if the class name "Form-control" class name is added to the TEXTAREA element. Because the Form-control-style form control in the bootstrap frame has a width of 100% or auto.

<form role= "Form" >
 <div class= "Form-group" >
 <!--rows= "3" set a height of three lines-->
 <textarea class= "Form-control" rows= "3" ></textarea>
 </div>
</form> 

4) check box checkbox

Vertical arrangement:

<form role= "Form" >
 <div class= "checkbox" >
 <label><input type= "checkbox" Value= "" > check box </label>
 </div>
</form> 

Horizontal arrangement:

<form role= "Form" >
 <div class= "Form-group" >
 <label class= "Checkbox-inline" ><input type= "checkbox" value= "Option1" > check box 1</label> <label class= "Checkbox-inline" ><input type=
 " CheckBox "Value=" Option2 > check box 2</label>
 </div>
</form>

5) Single selection button radio

Vertical arrangement:

<form role= "Form" >
 <div class= "Radio" >
 <label><input type= "Radio" name= "Optionsradios" "Id=" optionsRadios1 "value=" Love "checked>a</label>
 </div>
 <div class=" Radio ">
 <!--both the checkbox and radio are wrapped with label-->
 <label><input type= "Radio Name=" Optionsradios "id=" OptionsRadios2 "value=" hate ">B</label>
 </div>
</form> 

Horizontal arrangement:

<form role= "Form" >
 <div class= "Form-group" >
 <label class= "Radio-inline" ><input type = "Radio" value= "Option1" name= "Sex" >A</label>
 <label class= "radio-inline" ><input type= " Radio "value=" Option2 "name=" Sex ">B</label>
 </div>
</form>

Note: The checkbox is placed in a container named ". CheckBox" along with the label label, and the radio is placed in a container named ". Radio" along with the label label.

3.Bootstrap Form Control state

1) Focus State

The focus state is implemented by adding a class name Form-control for input. The focus state of the form control in the bootstrap frame removes the outline default style and adds the shadow effect again.

<!--form-horizontal realize horizontal form effect-->
<form role= "form" class= "Form-horizontal" >
 <div class= " Form-group ">
 <div class=" col-xs-6 ">
 <input class=" Form-control input-lg "type=" text " placeholder= "Focus Status" >
 </div>
 </div> 

2) disabled status

Just add "disabled" to the form control you want to disable:

<input class= "Form-control" type= "text" placeholder= "form is disabled and cannot be entered" disabled>

3) Verify Status

To do form validation, you also need to provide validation status styles, which also provide these effects in bootstrap:

You only need to add the State class name on the Form-group container when you use it.

<form role= "Form" >
 <div class= "Form-group has-warning" > <label class= "Control-label" for= "
 InputWarning1 "> Warning status </label>
 <input type=" text class= "Form-control" id= "inputWarning1" placeholder = "Warning Status" >
 </div>
 <div class= "Form-group has-error" >
 <label class= "Control-label" for= "InputError1" > Error status </label>
 <input type= "text" class= "Form-control" id= "InputError1" placeholder= " Error status ">
 </div>
 <div class=" Form-group has-success ">
 <label class=" Control-label "for = "InputSuccess1" > Success status </label>
 <input type= "text" class= "Form-control" id= "InputSuccess1" Placeholder= "Success Status" >
 </div>
</form>

The effect chart is as follows:

If you want the form to display the icon in its corresponding state, simply add the class name "Has-feedback" in the corresponding state (this class name should be with "Has-error", "has-warning" and "has-success").

4.Bootstrap Form-button

1 Custom Style button

<button class= "btn" type= "button" > Base button </button> <button class= "btn" btn-default " 
button" > Default button </button> 
<button class= "btn btn-primary" type= "button" > main button </button> 
< Button class= "btn btn-success" type= "button" > "Success button </button> <button class=" btn "btn-info" button 
> Info button </button> 
<button class= "btn btn-warning" type= "button" > Warning button </button> 
< Button class= "btn btn-danger" type= "button" > Danger button </button> <button class= "btn btn-link 
" type= "button" > Link Buttons </button>

The effect chart is as follows:

2 The bootstrap button supports multiple labels, and the other labels make buttons as follows:

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

3) button Size

Control the size of a button by appending the class name to the Base button ". Btn".

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

4 block button (more for mobile end)

Block button: The button width fills the entire parent container (width:100%) and does not have any padding and margin values.
Bootstrap provides a class name "Btn-block", the button to use this class name can be implemented block button (specific source code please refer to the Bootstrap.css file line No. 2340 ~ No. 2353 Line)

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

The effect chart is as follows:

5.Bootstrap form-button status

There are two main types of state effects for buttons in bootstrap: Active state and disabled state.

1 Active State: mainly includes the suspension state of the button (: hover), the Click State (: Active) and the Focus State (: focal) several.

2) Disabled status

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 prevent the default behavior of buttons. The way to add a "disabled" attribute to an element label is to suppress the default behavior of the element.

6.Bootstrap image

The style of the image is provided in Bootstrap in the following ways:

How to: Simply add the corresponding class name to the IMG tag, as follows:

The results of the operation are as follows or view the right result window:

7.Bootstrap icon

Bootstrap offers 200 different icon, as follows:

How to: Simply add the corresponding icon class name to the label, as follows:

<span class= "Glyphicon glyphicon-asterisk" ></span>
<span class= "Glyphicon glyphicon-plus" ></span>

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

Series of articles:

First contact with the magical Bootstrap Foundation typesetting http://www.jb51.net/article/89278.htm
First contact with the magical bootstrap grid system http://www.jb51.net/article/89333.htm

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.