HTML-基于bootstrap的面板panels和表单的form-control

Posted 2022-05-24 minydong

    <div class="panel panel-primary">   //面板组件用于将DOM组件插入到一个盒子中
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
               //向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" ;基本表单结构
                <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="添加" class="btn btn-primary" v-on:click="add">

            <label>
                搜索名字关键字：
                <input type="text" class="form-control" v-model="keywords">
            </label>
        </div>
    </div>


1、使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，如

　　<div class="panel panel-primary"></div>
2、面板基本样式

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

3、常见的表单元素：文本框、文本域、下拉菜单、单选框、复选框、按钮等

4、表单控件加上类form-control后，效果为：

• 宽度为100%

• 设置边框为浅灰色

• 控件具有4px的圆角

• 设置阴影效果，元素得到焦点时，阴影和边框效果会发生变化

• 设置placeholder的颜色为#999

5、如果在input之前增加一个label标签，会导致input换行显示，如果必须添加这样一个label标签，且不想让input换行，就需要将label标签也放在容器.form-group中。实现联表单效果只需在form元素中添加类名.form-inline即可，实现原理：将表单控件设置成内联块元素（display：inline-block），让表单控件在一行显示。