Form
Basic Form
For input, textarea, and select in the form, I usually add the class "form-control", which sets the default width of the element to 100% (not absolute, such as the inline form mentioned below). And each element (including label and element to be entered) will be added with a "form-group". It has only one style. margin-bottom:15px.
<form action=""><div><label for="">Username: </label><input type="text"/></div><div><label for="">Password: </label><input type="password"/></div></form>
Inline form
By adding "form-inline" to the outermost element (the parent element of form-group). Indicates that all form elements are displayed on one line (with sufficient width). And ".form-inline .form-group" is displayed as an inline-block. And the width of ".form-inline .form-control" is auto. This ensures that it is displayed in one line.
<form action=""><div><label for="">Username: </label><input type="text"/></div><div><label for="">Password: </label><input type="password"/></div></form>
Horizontal form
Unlike normal and inline forms. If you want to display label and input form elements on one line, you need to use "form-horizontal". This kind of joint "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 right-aligning text. If you don't add this, the label and input will appear to be incompatible.
<form action=""><div><label for="">Username: </label><div><input type="text"/></div></div><div><label for="">Password: </label><div><input type="password"/></div></div></form>
Form size
The ones that control input size are "input-sm" and "input-lg", which make the input input box look smaller or larger than normal. Corresponding to this is the size of the text in the label. You need to add "form-group-sm" and "form-group-lg" to the parent "form-group" at the same time. As in the password input box of a demo above.
Input box
In HTML5, the type in the input box tag supports more types. There are text, password, datatime, datatime-local, date, month, time, week, number, email, url, search, tel and color. The correct style can only be displayed on the label <input> if a specific type is assigned. Some elements can only show their effects on your phone.
drop-down box select
Similar to the input box. It just changed the input to select and added the "form-control" class.
<form action=""><div><label for="">Please select: </label><div><select name="" id=""><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></form>
col-md-pull-* is the left offset.
Text field
Similar to the above.
<form action=""><div><label for="">textarea:</label><div><textarea name="" id="" rows="3">hello</textarea></div></div></form>
Multiple and radio boxes
In order to make the radio and checkbox elements appear in one row and align with the label. bootstrap offers two options. One:
<div><label for=""><input type="radio" name="sex"/>Male<input type="radio" name="sex"/>Female<input type="radio" name="sex"/>Confidential</label><label for=""><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 blocked.
So wrap multiple radio or check boxes with one label, which will appear unprofessional (haha). Also, many are also very unsightly. So, the second way of writing is here.
<div><label for=""><input type="radio" name="sex"/>Male</label><label for=""><input type="radio" name="sex"/>Female</label><label for=""><input type="radio" name="sex"/>Confidential</label><br /><label for=""><input type="checkbox" />HTML</label><label for=""><input type="checkbox" />CSS</label><label for=""><input type="checkbox" />JavaScript</label></div>
Form Verification
has-success: Success, green.
has-warning: Warning, yellow.
has-error: Error, red.
Just add the corresponding style to the "form-group". For better verification, we can continue to add "has-feedback". Then add "form-control-feedback" to the element level after input ("form-control"). The semantics are clear and clear. The code is as follows:
<form action=""><div><label for="">Username: </label><div><input type="text" /><span></span></div></div><div><label for="">Password: </label><div><input type="text" /><span></span></div></div><div><label for="">Email: </label><div><input type="text" /><span></span></span></form>
Button
Multi-button and button style
There are various button styles in bootstrap. Button, a, input, span, div, etc. can all become buttons as long as it has "btn btn-style". However, for better compatibility and readability, it is best not to use this way, try to use button tags.
<button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><!--btn-block makes the button exclusive to one row--><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button><button>button</button>
Button size
As mentioned above, use "btn-xs", "btn-sm", "btn-lg" to set the button size.
Button Status
As mentioned above, the effective ones are "active" and "focus".
picture
img-responsive: Responsive pictures, mainly aimed at responsive design.
img-rounded: rounded corners.
img-circle: round.
img-thumbnail: Thumbnail, represented by a border added to the outer layer.
icon
bootstart has many small icons built in. The usage method is as follows. In fact, it has been used in the above "form-control-feedback". Among them, "glyphicon" is a must.
<span></span>
Input box group
The input box group is an "input-group". We need to add some suffixes (such as email suffixes) and prefixes (money symbols ￥, $, etc.) to use "input-group-addon" or "input-group-btn". Simple and clear semantics. as follows:
<!--Email-box--><div><input type="text" /><span>@gmail.com</span></div><!--Currency--><div><span>$</span><input type="text"><span>.00</span></div><!--Single choice--><div><span><input type="radio"/></span><input type="text"/></div><!--Multiple choice--><div><span><input type="checkbox"/></span><input type="text" /></div><!--Taobao input box group--><div><div><button data-toggle="dropdown">Please select <span></span></button><ul><li><a href="javascript:void(0)">Baby</a></li><li><a href="javascript:void(0)">Shop</a></li></ul></div><input type="text" /><span><button>Search</button></span></div>
summary
"form-horizontal" and "form-inline" are both the outermost labels of the form group.
A form group takes "form-group" as the parent element. Similar ones are "input-group" and "button-group" that may be used in the future. They can all be sized.
"form-group-lg", "input-lg", "input-group-lg", "btn-lg", etc.
The verification style has "has-error", "has-success", "has-warning". "has-feedback" can be added to the same element. In order to make verification more complete.
There are many styles for buttons and sizes can be set.
Four common styles for pictures.
bootstarp has many icons built in.
The input box group starts with "input-group", and the child elements include "input-group-addon", "input-group-btn", etc.
The above is a complete collection of forms in BootStrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!