The fourth chapter bootstrap form and picture _javascript skill

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Learning points:

1. Form
2. Picture

In this lesson we mainly learn Bootstrap form and picture function, through the built-in CSS definition, show a variety of rich effects.

A Form

Bootstrap offers a number of rich form styles for developers to use.

1. Basic format

Implement basic form Styles
<form>
<div class= "Form-group" >
<label> e-mail </label>
<INP UT type= "email" class= "Form-control" placeholder= "Please enter your email" >
</div>
<div class= "Form-group" >
<label> password </label>
<input type= "password" class= "Form-control" placeholder= "Please enter your password" >
</div>

Note: only the type of the input box is correctly set to be given the correct style. The supported input box controls include: Text, Password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.

2. Inline form

Let the form float to the left, and represent the Inline-block block structure

Note: when less than 768px, the exclusive style is restored

3. Form Combination Group

Before and after adding fragments
<div class= "Input-group" >
<div class= "Input-group-addon" >￥</div>
< Input type= "text" class= "Form-control" >
<div class= "Input-group-addon" >.00</div>

4. Horizontal arrangement

Keep elements in a form horizontally
<form class= "Form-horizontal" >
<div class= "Form-group" >
<label class= " Col-sm-2 Control-label "> Email </label>
<div class=" col-sm-10 ">
<input type=" email "class=" Form-control "placeholder=" Please enter your email ">
</div>
</div>
</form>

Note: The COL-SM grid system is used here, and the following chapters will focus on the Control-label representation and the parent element style synchronization.

5. check box and Radio box

Set check box,
<div class= "checkbox" >
<label> <input type= "checkbox" on one line > sports
</label>
</div>
<div class= "checkbox" >
<label> <input type= "checkbox" > Music
</ label>
</div> 
//Set disabled checkbox
<div class= "checkbox disabled" >
<label> <input type= "checkbox" disabled> music
</label>
</div> 
//Set the check box displayed inline line
<label class= " Checkbox-inline "> <input type=" checkbox "> Sports </label>
<label class=" checkbox-inline disabled " > <input type= "checkbox" disabled> music </label> 
//Set Radio box
<div class= "Radio Disabled" >
<label> <input type= "Radio" name= "Sex" disabled> male </label>

6. Drop down list

Set Drop-down list
<select class= "Form-control" >
<option>1</option>
<option>2</ option>
<option>3</option>
<option>4</option>
<option>5</ Option>

7. Verification Status

Set to Error state

Note: There are other states as follows:

Style description
has-error error status
has-success success status
has-warning warning status
//label label sync corresponding state

8. Add an extra icon

text box right-built text icon
<div class= "Form-group has-feedback" >
<label> email </label>
<input Type= "Email" class= "Form-control" >
<span class= "Glyphicon glyphicon-ok" Form-control-feedback Span>

Note: In addition to Glyphicon-ok, there are several tables as follows:

Style description
Glyphicon-ok success Status
glyphicon-warning-sign warning state
glyphicon-remove Error state

9. Control size

From big to small
<input type= "password" class= "Form-control input-lg" >
<input type= "Password" Form-control ">

Note: You can also set the parent element Form-group-lg, FORM-GROUP-SM, to adjust.

Two Image

Bootstrap offers a number of rich picture styles for developers to use.

1. Picture shape

Three shapes


 
//Response picture

The above is a small set up to introduce the bootstrap form and pictures of the relevant content, I hope to help you!