Bootstrap form layout _javascript tips

Bootstrap provides the following types of form layouts:

• Vertical form (default)-> This is not good-looking, are mobile version, the PC version of a row is not good to see;

• Inline Form-> I believe this is what you want, PC version response horizontal, mobile version of the response vertical row.

• Horizontal form-> with grid system control display

One, vertical form

Standard steps for using vertical forms

1.<form> element to add role= "form".

2. Put the labels and controls in a <div> with "Form-group" to get the best spacing.

3. Add "Form-control" style to all text elements <input>, <textarea> and <select>.

<form role= "Form" >
<div class= "Form-group" >
<label for= "name" > name </label>
< Input type= "text" class= "Form-control" id= "name" placeholder= "Please enter the name" >
</div>
<div class= " Form-group ">
<label for=" name "> Age </label>
<input type=" text "class=" Form-control "id=" Name "Placeholder= Please enter age" >
</div>
</form>

Two, inline layout

The inline layout is exactly the same as the vertical layout, except that you need to give <form role= "form" > Add a Class=form-inline.

<form role= "form" class= "Form-inline" >

With such an inline layout, the large screen is displayed horizontally, and the small screen is displayed vertically.

Small screen:

Large screen:

Third, the horizontal form

A horizontal form refers to the level between a label label and a control (input, button).

The following steps are used:

• Add Class. Form-horizontal to the parent <form> element.

• Place labels and controls in a <div> with class. Form-group.

• Add Class. Control-label to the label.

<form role= "form" class= "Form-horizontal" >
<div class= "Form-group" >
<label for= "name" class= "Control-label col-sm-2" > name </label>
<div class= "col-sm-10" >
<input type= "text" class= " Form-control "id=" name placeholder= "Please enter name" >
</div>
</div>
<div class= "Form-group" >
<label for= "name" class= "Control-label col-sm-2" > Age </label>
<div class= "col-sm-10" >
<input type= "text" class= "Form-control col-sm-10" id= "name" placeholder= "Please enter age" >
</div>
</form>

After using the form-horizontal, you can give the input control a nested div, and Div can also use the grid system. The form-horizontal style changes the behavior of the. Form-group and behaves like rows in a grid (row).

check box checkbox and Radio Box Radio

These two controls are special in bootstrap, and sometimes require horizontal, sometimes vertical rows.

It is also inline with the form.

• If the inline display is required, the class of the label enclosing the outer layer is set to Checkbox-inline.
• If the default vertical display is required, the class of the label surrounded by the outer layer is heckbox.

<form role= "Form" > <!--check--> <div class= "checkbox" > <label><input type= "checkbox" Value= "" > Banana </label> </div> <div class= "checkbox" > <label><input type= "checkbox" Value= "" > Apple </label> </div> <div class= "checkbox" > <label><input type= "checkbox" value= "> Watermelon </ label> </div> <div class= "Checkbox-inline" > <label><input type= "checkbox" value= "" > Banana < /label> </div> <div class= "Checkbox-inline" > <label><input type= "checkbox" Value= "" > Apple </label> </div> <div class= "Checkbox-inline" > <label><input type= "checkbox" Value= "> Watermelon </label> </div> <!--radio--> <div class= "Radio" > <label> <input type= "Radio" name= " Optionsradios "value=" Option1 "checked> man </label> </div> <div class=" Radio "> <label> < Input type= "Radio" name= "Optionsradios" value= "Option2" checked> Women </label> </div> <div class= "Checkbox-inline" > <label> <input type= "Radio" name= " Optionsradios "value=" Option1 "checked> man </label> </div> <div class=" Checkbox-inline "> <label > <input type= "Radio" name= "Optionsradios" value= "option2" checked> women </label> </div> </form >

The display effect is as follows:

Five, static controls

Static controls refer to controls that cannot change values, and in bootstrap, use class= "form-control-static" on <p> when you want to place plain text behind a form label in a horizontal form.

<form role= "Form" >
<div class= "Form-group" >
<label class= "col-sm-1 Control-label" > name < /label>
<div class= "col-sm-11" >
<p class= "form-control-static" > Liu Xuande </p>
</div >
</div>
</form>

The display effect is as follows:

Six, form Help text

Bootstrap form help text generally refers to the input entry prompts, usually after the input followed by a. Help-block HTML element.

<form role= "Form" >
<div class= "Form-group" >
<input class= "Form-control" type= "text" >
<span class= "Help-block" >
Special Reminder, if you have nothing, do not enter.
</span>
</div>
</form>

The display effect is as follows:

In addition to these, bootstrap there are many to control the input height Ah, the input is successful Ah, and so on some of the column style, these just check, find the corresponding key words can be used, later encounter wonderful records.

The above is a small set to introduce the bootstrap form layout, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!