Bootstrap Series--11. Base form

The main function of the form is to communicate with the User a Web page control, good form design can make the Web page and the user better communication. Common elements in a form include text input boxes , drop-down selection boxes, radio buttons, check buttons , text fields , and buttons . Each of these controls plays a different role, and different browsers render styles differently for form controls.

　　

<formrole= "form">        <Divclass= "Form-group">            <label for= "ExampleInputEmail1">Mailbox:</label>            <inputtype= "Email"class= "Form-control"ID= "ExampleInputEmail1"placeholder= "Please enter your e-mail address"/>        </Div>        <Divclass= "Form-group">            <label for= "ExampleInputPassword1">Password</label>            <inputtype= "Password"class= "Form-control"ID= "ExampleInputPassword1"placeholder= "Please enter your email password"/>        </Div>        <Divclass= "checkbox">            <label>                <inputtype= "checkbox"/>Remember the password</label>        </Div>        <Buttontype= "Submit"class= "Btn Btn-default">Go to Mailbox</Button>    </form>

base Form

In Bootstrap, the margin,padding , and border of these elements are mainly refined. 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 A rounded corner with 4px

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

5. set the color of the placeholder to #999

Run

Bootstrap Series--11. Base form