bootstrap--Global CSS style form

Individual form controls are automatically assigned to some global styles. All settings for .form-control the class <input> , <textarea> and the <select> elements will be set by default to the Width property width: 100%; . The label best arrangement can be obtained by wrapping the element with the previously mentioned controls .form-group .

1, inline form

Adding a class to an <form> element .form-inline makes its contents left-aligned and behaves as a inline-block level control. applies only when the viewport (viewport) is at least 768px wide (the viewport width is smaller, it collapses the form).

(1) You may need to set the width manually

In Bootstrap, the input box and the Radio/Multi box control are set to width by default width: 100%; . In inline forms, we set the width of these elements to width: auto; , so that multiple controls can be arranged on the same line. Depending on your layout needs, some additional custom components may be required.

(2) Be sure to add label tags

If you do not set a label for each input control label , the screen reader will not recognize it correctly. For these inline forms, you can label hide them by setting the .sr-only class. There are also assistive technologies that provide alternative options for label labels, such as aria-label , aria-labelledby or title attributes. If none of these exist, screen readers may take the use of placeholder attributes and, if present, use placeholders instead of other tokens, but be aware that this method is not appropriate.

Code<formclass="Form-inline"> <divclass="Form-group"> <labelclass="sr-only" for="ExampleInputEmail3">email address</label> <input type="Email"class="Form-control"Id="ExampleInputEmail3"Placeholder="Enter Email"> </div> <divclass="Form-group"> <labelclass="sr-only" for="ExampleInputPassword3">Password</label> <input type="Password"class="Form-control"Id="ExampleInputPassword3"Placeholder="Password"> </div> <divclass="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="Submit"class="btn Btn-default">signinch</button></form>

2, horizontally arranged forms

.form-horizontalyou can label lay out labels and control groups horizontally by adding classes to your form and using the Bootstrap preset raster class together. Doing so will change .form-group the behavior so that it behaves as a row in the grid system, so there is no need to add additional .row .

Code<formclass="Form-horizontal"> <divclass="Form-group"> <label for="InputEmail3"class="col-sm-2 Control-label">Email</label> <divclass="col-sm-10"> <input type="Email"class="Form-control"Id="InputEmail3"Placeholder="Email"> </div> </div> <divclass="Form-group"> <label for="InputPassword3"class="col-sm-2 Control-label">Password</label> <divclass="col-sm-10"> <input type="Password"class="Form-control"Id="InputPassword3"Placeholder="Password"> </div> </div> <divclass="Form-group"> <divclass="col-sm-offset-2 col-sm-10"> <divclass="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <divclass="Form-group"> <divclass="col-sm-offset-2 col-sm-10"> <button type="Submit"class="btn Btn-default">signinch</button> </div> </div></form>

3, supported controls

Support for almost all form controls

Specific details of how to use, you can log in to view the Help document

bootstrap--Global CSS style form