Bootstrap's form

Base form

The common elements in the form include: Text input Box、 Drop- down selection box, radio button, check button、 text FieldAnd Buttonsuch as

Of course, in addition to these elements, there are input,select,textarea and other elements, in the bootstrap framework, by customizing a class name 'Form-control ', that is, if these elements use the class name "Form-control", some design-specific effects will be implemented.

1, the width becomes 100%

2. A light gray (#ccc) border is set

3, with 4px rounded corners

4. Shadow and border effects change when the shadow effect is set and the element gets focus

5, set the color of the placeholder for #999

Note: The class name " . Form-control"is added on the input, select. Controls only the style of the input box. Note: When the type of input is a checkbox or radio,,<label> is wrapped <input> >. Level Form

Bootstrap frame default form is vertical display style , but many times we need the horizontal form style (tag left, form control right) see.

<form class= " Form-horizontal "role=" form "><div class=" Form-group ">  <label for=" inputEmail3 "class=" Col-sm-2  control-label"> Email </label>  <div class="col-sm-10" >  <input type= "email" class= "Form-control" id= "inputEmail3" placeholder= "Please enter your email address" >  </div ></div>

From the above can be seen how to use the Level form: 1. Add the. Form-horizontal class to the form. 2. Wrap the label and INPUT3 with a div.form-group. Add. col-sm-2. Control-label4 to the label. Wrap the INPUT5 with a. col-sm-10 Div. Add Form-control class to input   The use of the class name "Form-horizontal" on the <form> element mainly has the following functions:
1. Set the form control padding and margin values.
2, change the expression of "Form-group", similar to the grid system "row".   inline FormSometimes we need to display the form's controls in one line, like this: Just add the class name "Form-inline" to the <form> element.  If you want to add a label label in front of input, it causes input to be displayed in a newline. If you have to add a label like this, and you don't want input to wrap, you need to place the label tag in the div container "form-group", such as:

class= "Form-inline"class= "Form-group">  <label class= "sr-only "for=" exampleInputEmail2 "> Email </label>  <input type=" email "class=" Form-control "id=" ExampleInputEmail2 "placeholder=" Please enter your e-mail address "></div>

You might ask why the label tag was added and not placed in a container such as "Form-group", where input is not wrapped, and the label tag is not displayed. If you look closely at the label tag using a class name "Sr-only", the label does not show that this style hides the tag. Note: So why would Bootstrap do this? Isn't that superfluous? Not really, if you don't set the label label for the input control, screen readerwill not be recognized correctly. This is another advantage of the bootstrap framework, which has given some consideration to the disabled people.In addition to the checkbox and radio, each form control is wrapped with a div.form-group? also, for inline input checkbox radio A div.form-group wraps all the form controls that are inline?   form control (input box inputs) Single line Input box, a common text input box, which is inputOf typeProperty value is text。 You must also add a type when using input in bootstrap, and if you do not specify a type, you will not get the correct style because the bootstrap framework is input[type= "?"](where the? symbol represents the type, such as the text type, corresponds to the input[type= "text"]form to define the style.   form controls (drop-down selection Select)The drop-down selection box in the bootstrap frame uses the same as the original, multi-line selection settings multipleproperty has a value of multiple。   form controls (text field textarea)As with the original use method, the text field is set rowsCan define its height, set colsYou can set its width. But if textareaThe class name is added to the element. Form-control"Class name, you do not have to set the Cols property. Because the "Form-control" style of the form control in the bootstrap frame has a width of 100%Or Auto。 So for input Add. Form-control the width of the post box to the edge of the browser. Can you shorten the width by adding. col-sm-numbers?   form controls (check box checkbox and single-selection button radio)Checkboxes and radio are a bit special in the bootstrap framework, and Bootstrap have done some special processing for them, mostly with checkboxes and radio with label labels. There are some minor problems (the most headaches are alignment issues). For example: So take the following method: 1, either a checkbox or a radio is wrapped with a label
2. The checkbox, together with the label label, is placed in a div container named ". CheckBox"
(2) Radio with label label placed in a div container named ". Radio"
In the bootstrap framework, the ". CheckBox" and ". Radio" styles are used primarily to handle check boxes, radio buttons, and label alignment.

class= "checkbox"><label><input type= "checkbox" Value= "" > Remember password </label></div>

class= "Radio"><label><input type= "Radio" name= "Optionsradios" id= "OptionsRadios2" value= "hate "> Don't like </label></div>

This becomes the following:as you can see from the above, for checkboxes and radio You can do this:1. Wrap the label and input[type= "checkbox" with a div.checkbox, or use a. Radio package label and Input[type= "Radio"]. 2. Let the label wrap the input[type= "checkbox"] or input[type= "Radio"]. form controls (check boxes and radio buttons are arranged horizontally)Sometimes, the check boxes and radio buttons need to be arranged horizontally for the layout to be needed. The bootstrap framework also makes this consideration:
1. If the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline" on the label label
2. If the radio needs to be arranged horizontally, simply add the class name "Radio-inline" to the label label.

<div class= " Form-group ">     class= "checkbox-inline" >      <input type= "checkbox"  value= "Option1" > Games    </label>    class= " checkbox-inline">      <input type=" checkbox "  value=" option2 "> Photography    </ label>    class= "checkbox-inline">    <input type= "checkbox"  value= "Option3" > Tours    </label>  </div>

the display of the above code is:Note: It is also necessary to wrap the label and input with a div, but this time the Div class is not "checkbox" or "Radio" as Above, but "Form-group".

<div class= "Form-group" >    <label>      <input type= "checkbox"  value= "Option1" > Games    </label>    <label>      <input type= "checkbox"  value= "option2" > Photography    </label>    <label>    <input type= "checkbox"  value= "Option3" > Travel    </label>  </div >

the display of the above code is:Attention Difference! The latter's input is not. Checkbox-inline   form controls (buttons)

Buttons are also one of the important forms of a form, and making buttons is typically implemented using the following code:

  ? input[type="submit"]

  ? input[type= "button"]

  ? input[type="reset"]

  ? <button>

The buttons in the bootstrap frame are implemented with <button>, Note that the button also has type = "button".

Note: It can be seen from above that ". Btn" is a must.   form Control Size:The form controls you see earlier are the normal size. You can set the control by setting the height,line-height,paddingAnd font-sizeproperty to implement the height setting of the control. However, the bootstrap framework also provides two different class names to control the height of the form controls. These two class names are:
1, INPUT-SM: Make the control smaller than normal size
2, INPUT-LG: Make the control larger than normal size

These two classes apply to input,textarea , and Select controls in a form.

input-lg"type=" text "placeholder=" Add. Input-lg, control becomes larger ">

Howeverwhether "input-sm" or "INPUT-LG" only handles the height of the control。 But often times, we need to handle the width of the control as well as a certain change. It's time to stay in the bootstrap framework. Grid System。

<div class= "col-xs-4" >    <input class= "Form-control input-lg" type= "text" placeholder= ". Col-xs-4 ">  </div>

  Form Control state (focus state)

Role of form state:

Each state can send different information to the user, such as the form has the focus of the state can tell the user can enter or select things, the disabled state can tell the user can not enter or select things, there is the form control validation status, you can tell the user is the correct operation. The form controls in the bootstrap framework also have these states.

To have the control have the above style effect in the focus state, you need to add the class name "Form-control" to the control in the bootstrap frame. file、 RadioAnd checkboxThe effect of the control in the focus state is not the same as the normal input control, mainly because Bootstrap has done some special processing on them:   Form control state (disabled state)The disabled state of the form control for the bootstrap framework is the same as the normal form disabled state implementation method, and the property "disabled" is added on the corresponding form control. Note: To have the radio and checkbox selected by default, add the attribute "checked"  But for the entire disabled domain (that is, the disabled is set in fieldset), if there is an input box in the legend, the the input box cannot be disabledOf

disabled><legend><input type= "text" class= "Form-control" placeholder= "Obviously I'm gray, but I'm not banned, I don't believe? Click to try "/></legend>    ...</fieldset></form>

  Form control state (validation status)When making a form, it is unavoidable to do form validation. It is also necessary to provide a validation state style, which is also available in the bootstrap framework.
1. Has-warning: Warning Status (yellow)
2. Has-error: Error status (red)
3. Has-success: Success status (Green)
Note: This is the addition of the State class name on the Form-group container. <label> added class= "Control-label" and also changed the label font color.

<div class= "Form-group has-success" >  <label class= "control-label" for= "InputSuccess1" > Success Status </label>  <input type= "text" class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" > </div>

Note that:<label> does not have a package to stay <input>Many times, when the form is validated, different states provide different icons, such as success is a checkmark (√), the error is a fork (x), and so on. This effect is also provided in the Bootstrap box. If you want the form to show the icon in its corresponding state, simply add the class name "Has-feedback" in the corresponding state. Note that this class name is to be combined with "Has-error", "has-warning", and "has-success":

Has-successhas-feedback">  <label class="control-label"for=" InputSuccess1 "> Success Status </label>  <input type= "text" class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" >   <span class= "Glyphicon glyphicon-ok form-control-feedback" ></span>

Note: Be sure to add the last <span> to the form; the span has 3 classes. form hint InformationA "Help-block" style is used in the bootstrap frame to display the cue information in chunks and at the bottom of the control.

<div class= "Form-group has-success has-feedback" >  <label class= "Control-label" for= "InputSuccess1" > Success Status </label>  <input type= "text" class= "Form-control" id= "InputSuccess1" placeholder= "Success Status" >  <span class= "Help-block" > The information you entered is correct </span>  <span class= "Glyphicon Glyphicon-ok Form-control-feedback "></span></div>

If you want the cue message to appear behind the control, which is the same level of display, you can use the bootstrap grid system:

<form role= "form" ><div class= "Form-group" ><label class= "Control-label" for= "InputSuccess1" > Success Status </label><div class= "Row" ><div class= "col-xs-6" ><input type= "Text" class = "Form-control" id= "InputSuccess1" placeholder= "Success status" ></div>class= "Col-xs-6 help-block "> The information you have entered is correct </span></div></div></form>

Default buttonThe bootstrap framework first defines a basic button style through the base class name ". Btn", and then defines a default button style through ". Btn-default". The default button style is based on the style of the base button to modify the button's Background Color、 Border ColorAnd text color。Note: To have both. BTN and. Btn-default ClassesOn the left is. btn, on the right is. btn. Btn-default   Button Multi-label supportGeneral production buttons In addition to the <button> tag elements, you can also use <input type= "Submit" > and <a> tags. Similarly, when making buttons in the bootstrap framework, in addition to the tag elements just mentioned, you can also use the other label elements, the only thing to note is to add the class name "BTN" to the label element of the Make button. If you don't add it, there won't be any button effects. Note:. Btn-default also need to add, otherwise no border?

<buttonclass= "BtnBtn-default"type= "button" >button label button </button><input type= "Submit" class= "btnbtn-default" value= "Input tag button"/><a href= "# #"class= "BtnBtn-default">a label Button </a><spanclass= "BtnBtn-default">span label Button </span><divclass= "BtnBtn-default">div label Buttons </div>

Note: Although the button style can be implemented using any tag element in the bootstrap framework, this is not recommended by individuals, and in order to avoid browser compatibility issues, It is highly recommended that you use the button or a tag to make buttons.   Custom StyleIn the bootstrap framework, different button styles are implemented by different class names, in the process of use, developers only need to choose a different class name: It is very simple to use, just like the previous introduction of the default button to use the same method, only need toAppend on base button ". Btn" the corresponding class name, you get the button style you need.   Button SizeIn the bootstrap frame, the size of the button can also be customized. Similar to input, byAppend on base button ". Btn"Class name to control the size of the button:. BTN-LG. BTN-SM . Btn-xs block ButtonA class name of "Btn-block" is provided in the bootstrap framework. The button uses this class name to fill the container with the button, and the button will not have any paddingAnd marginValue. Disable buttonAs with form controls such as input, the button in the bootstrap frame also has a disabled state setting. The disable state is treated as the transparency of the background color compared to other status buttons, and the value of opcity is adjusted from 100% to 65%.

In the bootstrap framework, there are two ways to disable a button:

Method 1: Add the disabled attribute to the label

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

The main differences between the two are:

the ". Disabled" style does not prohibit the default behavior of the button, such as commit and reset behavior. If you want such a disabled button to suppress the default behavior of the button, it needs to be handled in a language such as JavaScript. There is a similar problem with the <a> tag, and if the button is disabled by the class name ". Disable", its link behavior cannot be suppressed. The way to add the "disabled" attribute to the element label is to suppress the default behavior of the element.

Image

Images are often used in web authoring, and in the bootstrap framework, there are several styles available for the style of the image:

1, img-responsive: responsive image, mainly for responsive design
2, img-rounded: fillet picture
3, Img-circle: circular picture
4. Img-thumbnail: thumbnail image

How to use:

The use of the method is very simple, just need to add the corresponding class name on the tag, the following code:

icons

<span class= "glyphicon glyphicon-okform-control-feedback" ></span>

How to use: 1. Do not mix with other components icon classes cannot be used directly with other components. They cannot exist with other classes on the same element. You should create a nested <span>Label, and apply the icon class to this <span>The label. 2. function only for elements with empty contents

An icon class can only be applied to elements that do not contain any text content or child elements.

。。。。 Note: Place the Fonts folder in the Bootstrap folder in the CSS sibling, or the icon will not appear. Document View: http://v3.bootcss.com/components/

Bootstrap's form