Bootstrap Quick Learning Note (2) One of the form series

Welcome to Bootstrap Quick Learning notes (2) One of the form series

This study note is based on the [MU Lesson network] tutorial, which is used to learn bootstrap, which will bring a new experience:

• . Form-control Class
• Level form
• Inline form

Detailed Introduction

The
• Form-control class adds the class directly to the control, 1, the width becomes 100%, 2, a light gray (#ccc) border is set, 3 has a rounded angle of 4px, 4, the shadow effect is set, and the element gets the focus, The shadow and Border effects change, 5, set the placeholder color to #999
• horizontal form outermost form label to add Form-horizontal class A div container is added to the perimeter of each pair of labels and input with the class name Form-group, where the label tag is added to the class Col-sm-2;input tag to add a div container with the class name col-sm-10; remember password options The type is the input tag of the checkbox, the outside of the label label, and then the DIV tag with the checkbox class name, and the outside is the div tag with the Col-sm-offset-2 col-sm-10 class name, The outside is a div tag with the Form-group class name, and the Submit button is implemented with the button tag with the Btn Btn-default class name, and the perimeter is the div tag with the Col-sm-offset-2 col-sm-10 class name. The outside is a div tag with the Form-group class name;
• inline form Displays all form controls in one line, through class Form-inline, if you want to add a label before the input label Label, you want to include two tags in the div tag with the Form-group class attribute, and set the Sr-only class property for the label label, for the sake of the handicapped;
• check box and radio buttons are arranged horizontally 1, If the checkbox needs to be arranged horizontally, simply add the class name "Checkbox-inline" to the label label and 2, if the radio needs to be arranged horizontally, simply add the class name "Radio-inline" on the label label; approximate structure <form role= "Form" > contains <div class= "Form-group" > contains <label class= "Radio-inline" > contains <input type= "Radio"

Note: The accumulation of knowledge is a lengthy process, please continue to follow the content .

Bootstrap Quick Learning Note (2) One of the form series