<div class = " Panel Panel-Primary "> // DOM panel assembly for assembly into a box
<div class = " Panel-heading ">
<H3 class = " Panel-title "> Add brand </ h3 >
</ div>
<div class = " Panel-body form-inline ">
<label>
Id:
// to all text elements <input>, <textarea> and <select> = Add class " form-Control "; The basic structure of the form
<INPUT type = "text" class = " form-Control " = V-Model "ID">
</ label>
<label>
Name:
<input type="text" class="form-control" v-model="name">
</ label>
<input type = "button" value = " add" class = " btn btn-Primary " v-ON: the Click = "the Add">
<label>
Search Keyword name:
<the INPUT of the type = "text" class = "form- Control "V-Model =" Keywords ">
</ label>
</ div>
</ div>
. 1, a state-based context in Panel-Primary, Panel-Success, Panel-info, Panel-warning, Danger-Panel , to Context is provided with a color panel, such as
<div class = " Panel Panel-Primary "> </ div>
2, the panel base style
<div class = "Panel Panel-default">
<div class = "Panel-heading">
<H3 class = "Panel-title"> panel title </ H3>
</ div>
<div class = "Panel-body" >
this is a basic panel
</ div>
<div class = "footer-panel"> panel footer </ div>
</ div>
3, the common form elements: text boxes, text fields, drop down menus, radio buttons, check boxes, buttons, etc.
4, together with the form controls based form-control, the effect of:
-
A width of 100%
-
Set a light gray border
-
4px of control has rounded corners
-
Set the shadow effect, the element has the focus, shadows and border effects vary
-
Set placeholder color to # 999
5, if adding a label before the label input, cause input line shows the change, if this must be added a label tag, and does not want to change input line, it is necessary to label should be placed in the container .form-group. Just add the effect achieved with the form element in the form class name .form-inline to achieve the principle: form control is set to inline-block elements (display: inline-block), so that the form controls appear in a row.