4th Chapter form and picture

Learning Essentials:

1. Forms
2. Picture

Keynote Teacher: Li Tinghui

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

A Form
Bootstrap provides some rich form styles for developers to use.

1. Basic format
Implementing a basic form style

<form> 　　 <Divclass= "Form-group"> 　　　　 <label>Email</label> 　　　　 <inputtype= "Email"class= "Form-control"placeholder= "Please enter your email"> 　　 </Div> 　　 <Divclass= "Form-group"> 　　　　 <label>Password</label> 　　　　 <inputtype= "Password"class= "Form-control"placeholder= "Please enter your password"> 　　 </Div></form>

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

2. Inline form
Make the form left-aligned floating and appear as Inline-block inline block structure

<class= "Form-inline">

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

3. Form-Fit Group
Add clips before and after

<Divclass= "Input-group"> 　　 <Divclass= "Input-group-addon">￥</Div> 　　 <inputtype= "text"class= "Form-control"> 　　 <Divclass= "Input-group-addon">.00</Div></Div>

4. Horizontal arrangement
Keep elements in the form in a horizontal arrangement

<formclass= "Form-horizontal">    <Divclass= "Form-group">        <labelclass= "Col-sm-2 Control-label">Email</label>        <Divclass= "Col-sm-10">            <inputtype= "Email"class= "Form-control"placeholder= "Please enter your email">        </Div>    </Div></form>

Note: The COL-SM grid system is used here, which is explained in the following chapters, while the Control-label is synchronized with the parent element style.

5. check boxes and Radio boxes
Set the check box on one line

<Divclass= "checkbox">    <label> <inputtype= "checkbox">Sports</label></Div><Divclass= "checkbox">    <label> <inputtype= "checkbox">Music</label></Div>

Set the Disabled check box

<class= "checkbox disabled">    <label  ><type= "checkbox"  disabled>  Music     </label></div>

Set the check boxes that are displayed inline in a row

<labelclass= "Checkbox-inline"> <inputtype= "checkbox">Sports</label><labelclass= "Checkbox-inline disabled"> <inputtype= "checkbox"Disabled>Music</label>

Set up a radio box

 <  div  class  = "Radio Disabled"     >  <  label  >  <  input  type  = "Radio"   name  = "Sex"   disabled  >  male </ label  >  </ div  >  

6. Drop-down list
Setting the drop-down list

<Selectclass= "Form-control">    <option>1</option>    <option>2</option>    <option>3</option>    <option>4</option>    <option>5</option></Select>

7. Check Status
Set to Error status

<class= "Form-group has-error">

Note: There are other statuses as follows:
Style description
Has-error Error status
Has-success Success Status
Has-warning Warning Status

Label label Sync corresponding state

<class= "Control-label">Input with success</label  >

8. Add additional icons
text box to the right of the built-in text icon

<Divclass= "Form-group has-feedback">    <label>Email</label>    <inputtype= "Email"class= "Form-control">    <spanclass= "Glyphicon glyphicon-ok form-control-feedback"></span></Div>

Note: In addition to the GLYPHICON-OK, there are several tables as follows:
Style description
Glyphicon-ok Success Status
Glyphicon-warning-sign Warning Status
Glyphicon-remove Error status

9. Control size
From big to small

 <  input  type  = "Password"   class  = "Form-control input-lg"  >  <  input  type  = "Password"   class  = "Form-control"  >  <  input  type  = "Password"   class  = "Form-control input-sm"  >  

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

Two Image
Bootstrap offers some rich picture styles for developers to use.
1. Picture shape
Three kinds of shapes

<imgsrc= "Img/pic.png"alt= "Picture"class= "img-rounded"><imgsrc= "Img/pic.png"alt= "Picture"class= "Img-circle"><imgsrc= "Img/pic.png"alt= "Picture"class= "Img-thumbnail">

Responsive picture

<src= "Img/pic.png"  alt= "Picture"  class= " Img-responsive ">

4th Chapter form and picture