This article will introduce to you the forms in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
The form is a web control used to communicate with users, a good form Design can allow web pages to better communicate with users. Common elements in forms mainly include: text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields and buttons, etc. Each control plays a different role, and different browsers have different rendering styles for form controls.
Similarly, forms are also the core content in the Bootstrap framework. This article will introduce Bootstrap’s forms in detail
Basic forms
For basic forms, Bootstrap does not We didn’t do too much customized effect design on it. We only customized the fieldset, legend, and label tags in the form.
Mainly refined the margin, padding, and border of these elements
Of course, in addition to these elements, the form also has input, select, textarea and other elements. In the Bootstrap framework, a class name `form-control` is customized. That is to say, if these The element uses the class name "form-control", which will achieve some design customization effects
1. The width becomes 100%
2. A light gray color is set (#ccc ) border
3. With 4px rounded corners
4. Set the shadow effect, and when the element gets focus, the shadow and border effects will change
5 , set the placeholder color to #999
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Horizontal form
The default form of the Bootstrap framework is a vertical display style, but Many times we need the horizontal form style
By adding the .form-horizontal class to the form and using Bootstrap's preset grid class, label labels and control groups can be laid out horizontally side by side. Doing so will change the behavior of the .form-group so that it behaves like a row in the grid system, so there is no need to add an additional .row
Using the class name on the
##Inline form
Sometimes we need to display the form controls in one row. It is easy to implement such a form effect in the Bootstrap framework. You only need to add the class name "form-inline" to the
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Form Control Every form is composed of form controls. Without the control, the form loses its meaning[Input Box]
The above is the detailed content of Detailed explanation of forms in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn