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

Posted minydong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML-基于bootstrap的面板panels和表单的form-control相关的知识,希望对你有一定的参考价值。

    <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),让表单控件在一行显示。

以上是关于HTML-基于bootstrap的面板panels和表单的form-control的主要内容,如果未能解决你的问题,请参考以下文章

python测试开发django -141.Bootstrap 面板(Panels)

bootstrap面板的使用

没有 id 或数据的 Bootstrap 3 可折叠面板

easyui js panel 改变大小

编辑:Bootstrap panel-body 呼应帖子标题并充当相应帖子的链接

如何制作固定高度的 Bootstrap Panel 主体