Fully parse Bootstrap form usage (Form Style) _ javascript skills

Source: Internet
Author: User
This article comprehensively analyzes how to use Bootstrap forms. This article focuses on Bootstrap form styles. For more information, see I. Basic Forms

 

In addition to these elements, the form also contains input, select, textarea, and other elements. In the Bootstrap framework, a class name 'form-control' is customized, that is, if these elements use the class name "form-control", some design customization results will be achieved.

1. The width is 100%

2. Set a light gray (# ccc) border.

3. rounded corner with 4px

4. Set the shadow effect. When the element gets the focus, the shadow and border effects change.

5. Set the placeholder color to #999

Ii. Horizontal form
The default form style of the Bootstrap framework is vertical, but most of the time we need the horizontal form style (the label is left and the Form Control is right ).

 

To implement the horizontal form effect in the Bootstrap framework, the following two conditions must be met:
1.

It is easy to implement this form effect in the Bootstrap framework.

Add the Class Name ". form-inline" to the element.

If you want to add a label before input, it will lead to a line feed display of input. If you must add such a label and do not want the input to wrap it, you need to put the label in the container "form-group.

The above is the first article to fully parse the Bootstrap form usage method. More content will be updated later. I hope you will continue to pay attention to it.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.