Bootstrap _javascript skills in the form

Form

Underlying form

For input, textarea, select in the form, I would normally add the class "Form-control", which sets the default width of the element to 100% (not absolute, such as the following inline form). and each element (including the label and the element to be entered) is added "Form-group". It has only one style. margin-bottom:15px.

<form action= "" >
<div class= "Form-group" >
<label for= "" > User name:</label>
< Input type= "text" class= "Form-control"/>
</div>
<div class= "Form-group" >
<label for = "" > Password:</label>
<input type= "password" class= "Form-control"/>
</div>
</ Form>

　　Inline form

By adding "form-inline" to the outermost element (the Form-group's parent element). Indicates that all form elements are displayed on one line (in the case of sufficient width). and ". Form-inline. Form-group" are shown as inline block elements (inline-block). And the width of ". Form-inline. Form-control" is auto. This is guaranteed to be shown on one line.

<form action= "" class= "Form-inline" >
<div class= "Form-group" >
<label for= "" > User name: </ label>
<input type= "text" class= "Form-control"/>
</div>
<div class= "Form-group" >
<label for= "" > Password:</label>
<input type= "password" class= "Form-control"/>
</div >
</form>

　Horizontal form

differs from common forms and inline forms. If you want to display label and input form elements on one line, you need to use "form-horizontal". This class, combined with "Form-group", is equivalent to "row" in the grid system. So its subclasses have "col-md-*", and the label's "Control-label"--". Form-horizontal. Control-label", has the effect of text right alignment. If you do not add this, label and input will appear to be misaligned.

<form action= "" class= "Form-horizontal" >
<div class= "Form-group" > <label for= "class="
Control-label col-md-1 "> Username:</label>
<div class=" col-md-3 ">
<input type=" text "class=" Form-control "/>
</div>
</div>
<div class=" Form-group form-group-sm ">
< Label for= "" Class= "Control-label col-md-1" > Password:</label> <div class=
"col-md-3" >
<input type= "Password" class= "Form-control input-sm"/>
</div>
</div>
</form>

　　Form size

The input size is controlled by "Input-sm", "INPUT-LG", which makes the input input box look smaller or larger than normal. Corresponding to this is the size of the Chinese label. You need to add "form-group-sm" and "FORM-GROUP-LG" to the parent "Form-group". Like the password input box for the demo above.

Input box

In HTML5, the type in the Input box tab supports more types. There are text, password, datatime, datatime-local, date, month, time, week, number, email, URL, search, tel, and color. Label <input> only assign a specific type to display the correct style. Some elements can only be displayed on the phone to show their effect.

Dropdown box Select

Similar to the input box. Only the input is changed to select, plus the "Form-control" class.

<form action= "" class= "Form-horizontal" >
<div class= "Form-group" > <label for= "class="
Control-label col-md-2 col-md-pull-1 "> Please select:</label>
<div class=" col-md-3 col-md-pull-1 ">
<select name= "id=" "class=" Form-control ">
<option value=" ">HTML</option>
<option Value= "" >CSS</option>
<option value= ">Javascript</option>
<option value=" "> java</option>
<option value= "" >PHP</option>
<option value= "" >nodejs</option >
</select>
</div>
</div>
</form>

Col-md-pull-* is left offset.

Text fields

Similar to the above.

<form action= "" class= "Form-horizontal" >
<div class= "Form-group" > <label for= "class="
Control-label col-md-2 col-md-pull-1 ">textarea:</label>
<div class=" col-md-3 col-md-pull-1 ">
<textarea name= "" id= "" rows= "3" class= "Form-control" >
Hello
</textarea>
</div>
</div>
</form>

Multiple-selection boxes and radio boxes

To make the radio and CheckBox elements appear on one line and align with the label. Bootstrap offers two options. One

<div class= "Form-group" >
<label for= "" class= "Radio" > <input type= "Radio"
name= "sex"/> Male 
   <input type= "Radio" name= "Sex"/> Women <input type= "Radio"
name= "sex"/> Confidential
</label>
   
    <label for= "" class= checkbox >
<input type= checkbox/>html <input type=
"checkbox"/> CSS
<input type= "checkbox"/>javascript
</label>
</div>
   

The label itself is Inline-block. But. Radio,.checkbox itself is block.

So it's unprofessional to wrap multiple radio boxes or check boxes with a label (haha). Also, a lot of is also very not beautiful. So, here's the second way.

<div class= "Form-group" >
<label for= "" class= "Radio-inline" >
<input type= "Radio" name= "Sex"/ > Male
</label>
<label for= "" class= "Radio-inline" >
<input type= "Radio" name= "Sex"/> Female
</label>
<label for= "" class= "Radio-inline" > <input type= "Radio"
name= "sex"/> confidentiality
</label>
<br/>
<label for= "class=" Checkbox-inline ">
<input type=" CheckBox "/>html
</label>
<label for=" "class=" Checkbox-inline ">
<input type=" CheckBox "/>css
</label>
<label for=" "class=" Checkbox-inline ">
<input type=" CheckBox "/>javascript
</label>
</div>

Form validation

Has-success: Success, Green.

Has-warning: Warning, yellow.

Has-error: Wrong, red.

Add the corresponding style to "Form-group". For better verification, we can continue to add "Has-feedback". Then the element sibling plus "Form-control-feedback" after input ("Form-control"). The semantics are clear and unambiguous. The code is as follows:

<form action= "" class= "Form-horizontal" > <div class= "form-group has-error has-feedback" > <label for= "" class= "Control-label col-md-2 col-md-pull-1" > Username:</label> <div class= "col-md-3 col-md-pull-1" > < Input type= "text" class= "Form-control"/> <span class= "form-control-feedback glyphicon glyphicon-remove" > </span> </div> </div> <div class= "Form-group has-warning has-feedback" > <label for= "" class= "Control-label col-md-2 col-md-pull-1" > Password:</label> <div class= "col-md-3 col-md-pull-1" > <input type = "text" class= "Form-control"/> <span class= "form-control-feedback glyphicon glyphicon-warning-sign" ></ span> </div> </div> <div class= "Form-group has-success has-feedback" > <label for= "" class= " Control-label col-md-2 col-md-pull-1 "> Mailbox:</label> <div class=" col-md-3 col-md-pull-1 "> <input type= "Text" class= "Form-control"/> <span class= "K Glyphicon Glyphicon-ok "></span> <span> format correct </span> </div> </div> </form> 

Button

Multi-button and button style

The buttons in the bootstrap have a variety of styles. button, a, input, span, div, etc. can become buttons, as long as it has "btn btn-style." But for better compatibility and readability it's best not to do this, use button labels as much as possible.

 <button class= "btn btn-default" > button </button> <button class= "btn Btn-primary "> button </button> <button class=" btn btn-info "> button </button> <button class=" btn Btn-link "> button </button> <button class=" btn btn-success btn-xs "> button </button> <button class=" btn Btn-warning btn-sm "> button </button> <button class=" btn btn-error btn-lg "> button </button> <!-- Btn-block make the button exclusive one row--> <button class= "btn btn-default btn-block" > button </button> <button class= "BTN" Btn-primary btn-block "> button </button> <button class=" btn btn-info btn-block "> button </button> < Button class= "btn btn-link btn-block" > button </button> <button class= "BTN btn-success the Btn-xs active" > button </button> <button class= "btn btn-warning btn-sm btn-block Focus" > button </button> <button class= "Btn btn-error btn-lg btn-block" > button </button> 

　Button size

As mentioned above, use "Btn-xs", "Btn-sm", "BTN-LG" to set the button size.

　　Button status

As mentioned above, effective has "active", "Focus".

Image

Img-responsive: Responsive images, mainly for responsive design.
Img-rounded: Rounded corners.
Img-circle: Round.
Img-thumbnail: thumbnail, with a border added to the outer layer.

Icon

Bootstart has many small icons built into it. Use the following method. In fact, in the above "Form-control-feedback" has been used. Which "Glyphicon" is necessary.
<span class= "Glyphicon glyphicon-search" ></span>

Input Box Group

The input box group is a "Input-group". We need to add some suffixes (such as the mailbox suffix) and prefix (Money symbol ￥, $, etc.) to be used to "Input-group-addon" or "input-group-btn". The semantics are simple and clear. As follows:

<!--mailbox--> <div class= "Input-group" > <input type= "text" class= "Form-control"/> <span "class=" Input-group-addon "> @gmail .com</span> </div> <!--currency--> <div class=" Input-group "> <span class= "Input-group-addon" >$</span> <input type= "text" class= "Form-control" > <span class= " Input-group-addon ">.00</span> </div> <!--radio--> <div class=" Input-group "> <span class=" Input-group-addon "> <input type=" Radio "/> </span> <input type=" text "class=" Form-control "/> < /div> <!--multiple selection--> <div class= "Input-group" > <span class= "Input-group-addon" > <input type= " CheckBox "/> </span> <input type=" text class= "Form-control"/> </div> <!--taobao input box group--> <div class= "Input-group" > <div class= "input-group-btn" > <button class= "btn" Btn-default dropdown-toggle " data-toggle= "dropdown" > Please select <span class= "Caret" ></span> </button> &LT;ul class= "Dropdown-menu" > <li><a href= "javascript:void (0)" > Baby </a></li> <li>< A href= "javascript:void (0)" > Shop </a></li> </ul> </div> <input type= "text" class= " Form-control "/> <span class=" input-group-btn "> <button class=" btn btn-primary "> Search </button> < /SPAN> </div>

Summary

"Form-horizontal", "form-inline" are the outermost label of the form group.

A form group takes "Form-group" as its parent element. Similarly, there are "Input-group" and "Button-group" that may be in the future. They can all be set in size.

"Form-group-lg", "Input-lg", "Input-group-lg", "BTN-LG" and so on.

Verify the style has "Has-error", "has-success", "has-warning". The same element can be added "Has-feedback". To make the validation more complete.

The button has many styles and can be set in size.

Four styles commonly used in pictures.

Bootstarp has many icons built into it.

The input box group starts with "Input-group", and the child elements have "Input-group-addon", "input-group-btn", and so on.

The above is a small set to introduce the bootstrap in the form of the encyclopedia, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!