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> <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!