This article will mainly introduce the skills of using Bootstrap forms.
1.Bootstrap basic form
Common elements in forms mainly include: text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields and buttons, etc.
Let's first look at a basic form:
<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>Basic Forms</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body> <form role="form"> <div> <label for="exampleInputEmail1">Email:</label> <input type="email" id="exampleInputEmail1" placeholder="Please enter your email address"> </div> <div> <label for="exampleInputPassword1">Password: </label> <input type="password" id="exampleInputPassword1" placeholder="Please enter your password"> </div> <div> <label><input type="checkbox">Remember the password</label> </div> <button type="submit">Login</button> </form> </body></html>
The renderings are as follows:
We can also achieve different effects by adding different class names to form. The specific rules of form are shown in the following table:
For example:
<form role="form">...</form>
2.Bootstrap form control
1) Input box input
<form role="form"> <div> <!--The type type must be added. If the type type is not specified, the correct style will not be obtained --> <input type="email" placeholder="Enter email"> </div></form>
2) Pull down selection box select
<form role="form"> <div> <!--Single-line drop-down selection box--> <select> <option>1</option> <option>2</option> </select> </div> <div> <!--Multi-line selection box--> <select multiple> <option>1</option> <option>2</option> </select> </div></form>
3) Text field textarea
The text field is the same as the original usage method, setting rows can define its height, and setting cols can set its width. But if the class name "form-control" is added to the textarea element, there is no need to set the cols attribute. Because the "form-control" style form control in the Bootstrap framework is 100% or auto.
<form role="form"> <div> <!--rows="3" Set the height three lines--> <textarea rows="3"></textarea> </div></form>
4) Checkbox
Vertical arrangement:
<form role="form"> <div> <label><input type="checkbox" value="">checkbox</label> </div></form>
Horizontal arrangement:
<form role="form"> <div> <label><input type="checkbox" value="option1">checkbox1</label> <label><input type="checkbox" value="option2">checkbox2</label> </div></form>
5) Single Select Button Radio
Vertical arrangement:
<form role="form"> <div> <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label> </div> <div> <!-- Whether it is checkbox or radio, they are wrapped in label--> <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">B</label> </div></form>
Horizontal arrangement:
<form role="form"> <div> <label><input type="radio" value="option1" name="sex">A</label> <label><input type="radio" value="option2" name="sex">B</label> </div></form>
Note: Checkbox and label are placed in a container called ".checkbox"; radio and label are placed in a container called ".radio".
3. Bootstrap form control status
1) Focus status
The focus state is achieved by adding the class name form-control to the input. The focus state of the form control in the Bootstrap framework deletes the default style of the outline and adds the shadow effect again.
<!--form-horizontal achieves horizontal form effect-><form role="form"> <div> <div> <input type="text" placeholder="focus status"> </div> </div> </form>
2) Disable status
Just add "disabled" to the form control that needs to be disabled:
<input type="text" placeholder="Form is disabled, cannot be entered" disabled>
3) Verification status
For form verification, you also need to provide a verification status style. These effects are also provided in Bootstrap:
When using it, you only need to add the status class name corresponding to the form-group container.
<form role="form"> <div> <label for="inputWarning1">Warning status</label> <input type="text" id="inputWarning1" placeholder="Warning status"> </div> <div> <label for="inputError1">Error status</label> <input type="text" id="inputError1" placeholder="Error status"> </div> <div> <label for="inputSuccess1">Success status</label> <input type="text" id="inputSuccess1" placeholder="Success"> </div></form>
The renderings are as follows:
If you want the form to display icon in the corresponding state, you only need to add the class name "has-feedback" in the corresponding state (this class name should be accompanied by "has-error", "has-warning" and "has-success").
4.Bootstrap form-button
1) Custom style buttons
<button type="button">Basic Button</button> <button type="button">Default Button</button> <button type="button">Main Button</button> <button type="button">Success Button</button> <button type="button">Information Button</button> <button type="button">Warning Button</button> <button type="button">Danger Button</button> <button type="button">Link Button</button>
The renderings are as follows:
2) The Bootstrap button supports multiple labels, and the buttons made by other labels are as follows:
<button type="button">button tag button</button><input type="submit" value="input tag button"/><span>span tag button</span><div>div tag button</div><a href="##">a tag button</a>
3) Button size
Control the size of the button by appending the class name to the base button ".btn".
<button type="button">Normal button</button><button type="button">Large button</button> <button type="button">Small button</button>
4) Block button (more used on mobile terminals)
Block button: The button width fills the entire parent container (width:100%) and will not have any padding and margin values.
Bootstrap provides a class name "btn-block". The button can use this class name to implement a block button (for details, please refer to the bootstrap.css file line 2340 to line 2353)
<button type="button">Large button</button> <button type="button">Normal button</button><button type="button">Small button</button>
The renderings are as follows:
5.Bootstrap form-button status
In Bootstrap, the status effects of buttons are mainly divided into two types: active state and disabled state.
1) Active state: mainly includes several types of button suspension state (:hover), click state (:active) and focus state (:focus).
2) Disable status
There are two ways to disable the button:
Method 1: Add disabled attribute in the tag
Method 2: Add class name "disabled" to the element label
The main differences between the two are:
The ".disabled" style does not prohibit the default behavior of the button. The method of adding the "disabled" attribute to the element label can prohibit the default behavior of the element.
6.Bootstrap Image
In Bootstrap, the following styles are provided for the style of images:
How to use: Just add the corresponding class name to the img tag, as follows:
<img src="http://img.blog.csdn.net/20160726151432225"><img src="http://img.blog.csdn.net/20160726151432225"><img src="http://img.blog.csdn.net/20160726151432225">
The running effect is as follows or view the result window on the right:
7.Bootstrap icon
Bootstrap provides 200 different icons, as follows:
How to use: Just add the corresponding icon class name to the tag, as follows:
<span></span>
<span></span>
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
Series of articles:
The first time I came into contact with the magical Bootstrap basic layout //www.VeVB.COM/article/89278.htm
The first time I came into contact with the magical Bootstrap grid system //www.VeVB.COM/article/89333.htm
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.