Home>

This article will mainly introduce the use of bootstrap forms.

1.bootstrap basic form

Common elements in forms include:text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

Let's look at a basic form first:

<! Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Basic form</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" placeholder="Please enter your email address">
 </div>
 <div>
 <label for="exampleinputpassword1">Password:</label>
 <input type="password" placeholder="Please enter your password">
 </div>
 <div>
 <label><input type="checkbox">remember password</label>
 </div>
 <button type="submit">Login</button>
 </form>
</body>
</html>

We can also achieve different effects by adding different class names to the form,The specific rules of the form are shown in the following table:

E.g:

<form role="form">...</form>

2.bootstrap form control

1) input box input

<form role="form">
 <div>
 <!-You must add the type type, if you do not specify the type type, you will not get the correct style->
 <input type="email" placeholder="enter email">
 </div>
</form>

2) drop-down select box select

<form role="form">
 <div>
 <!-Single-line drop-down selection box->
 <select>
 <option>1</option>
 <option>2</option>
 </select>
 </div>
 <div>
 <!-Multi-line select box->
 <select multiple>
 <option>1</option>
 <option>2</option>
 </select>
 </div>
</form>

3) textarea

The text field is used in the same way as the original,Set rows to define their height,Set cols to set its width.However, 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 height three rows->
 <textarea rows="3"></textarea>
 </div>
</form>

4) checkbox

Arrange vertically:

<form role="form">
 <div>
 <label><input type="checkbox" value="">checkbox</label>
 </div>
</form>

Arrange horizontally:

<form role="form">
 <div>
 <label><input type="checkbox" value="option1">checkbox 1</label>
 <label><input type="checkbox" value="option2">checkbox 2</label>
 </div>
</form>

5) Single select button radio

Arrange vertically:

<form role="form">
 <div>
 <label><input type="radio" name="optionsradios" value="love" checked>a</label>
 </div>
 <div>
 <!-Whether it is a checkbox or a radio, it is wrapped with a label->
 <label><input type="radio" name="optionsradios" value="hate"&b;b</label>
 </div>
</form>

Arrange horizontally:

<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:The checkbox and label are placed in a container named ".checkbox";The radio is placed in a container named ".radio" along with the label.

3.bootstrap form control state

1) Focus status

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 has removed the default style of outline,Add the shadow effect again.

<!-Form-horizontal achieve horizontal form effect->
<form role="form">
 <div>
 <div>
 <input type="text" placeholder="focus state">
 </div>
 </div>
</form>

2) Disabled

Just add "disabled" to the form controls that need to be disabled:

<input type="text" placeholder="form is disabled,Cannot enter "disabled>

3) Verification status

Do form validation,You also need to provide a validation status style,These effects are also provided in bootstrap:

When you use it, you only need to add the state class name to the form-group container.

<form role="form">
 <div>
 <label for="inputwarning1">warning status</label>
 <input type="text" placeholder="Warning Status">
 </div>
 <div>
 <label for="inputerror1">Error status</label>
 <input type="text" placeholder="error status">
 </div>
 <div>
 <label for="inputsuccess1">success status</label>
 <input type="text" placeholder="success status">
 </div>
</form>

If i want the form to display the icon in the corresponding state, you only need to add the class name "has-feedback" in the corresponding state. success "together).

4.bootstrap form-button

1) Custom style button

<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">Dangerous button</button>
<button type="button">link button</button>

2) bootstrap button supports multiple tags,The buttons for other labels are as follows:

<button type="button">button label 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

The size of the button is controlled 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 (used on mobile)

Block button:The button width fills the entire parent container (width:100%), without any padding and margin values.

bootstrap provides a class name "btn-block". Buttons can use this class name to implement block buttons (see the bootstrap.css file for lines 2340-2353)

<button type="button">Large button</button>
<button type="button">Normal button</button>
<button type="button">Small button</button>

5.bootstrap form-button state

There are two main effects of the state of the button in bootstrap:active state and disabled state.

1) Activity status:It mainly includes the hover state (:hover), click state (:active) and focus state (:focus) of the button.

2) Disabled

There are two ways to disable the button:

method 1:Add the disabled attribute to the tag

Method 2:Add the class name "disabled" to the element tag

The main differences between the two are:

The ".disabled" style does not disable the button's default behavior.The method of adding the "disabled" attribute to the element tag can disable the element's default behavior.

6.bootstrap image

In bootstrap, the following styles are provided for image styles:

How to use:Just add the corresponding class name on the img tag,The following code:

<img src="http://img.blog.csdn.net/20160726151432225">
<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 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 on the label,The following code:

<span></span>

<span></span>

Article series:

First contact with the magical bootstrap basic typography/go.php?id=89278&s=a

First contact with the magic bootstrap grid system/go.php?id=89333&s=a

  • Previous JavaScript to delete the computer's shutdown key
  • Next Ajax for remote communication