Bootstrap3 表单静态控件

静态控件

在表单中，当你需要在一个label元素的后面放置纯文本时，请在 <p>元素上添加.form-control-static类。如：

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>

效果如图 2‑58所示：

图2-58 堆叠静态控件

静态控件同样适用于行内表单。如：

<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>

效果如图 2‑59所示：

图2-59 行内静态控件

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 表单静态控件相关推荐

Bootstrap3 表单控件的状态
控件的状态在表单的使用过程中,每个控件可能都会有很多状态,通过表单控件的状态,可以给用户或访问者提供一些有用的反馈. Bootstrap为表单控件提供了 4 种状态,分别是获得焦点状态.禁用状态.只 ...
Bootstrap3 表单支持的控件
支持的控件 Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootst ...
Bootstrap3 表单
表单 Bootstrap 为表单和表单控件提供了一些全局样式,不需要添加任何辅助类,即可让表单使用默认布局.默认布局中,表单元素采用垂直布局,标签和输入框采用顶对齐方式. Bootstrap 中创建表 ...
bootstrap3 表单构建器_FastReport.NET报表设计器连接到OracleDB关系数据库
首先,您可以使用ODBC连接器.但是它充满了很多设置. FastReport.NET报表设计器连接到OracleDB关系数据库如您所见,您需要创建数据源及其连接字符串.动作比较多. 此方法的替代方法 ...
bootstrap3 表单构建器_实例演示：如何构建高可用的微服务架构
R 5月8日晚20:30,Kubernetes Master Class在线培训第五期<Kubernetes中的日志.监控与告警> 当你设计和构建大规模应用时,你将面临两个重大挑战:可伸缩 ...
Bootstrap3 表单帮助文本
帮助文本 Bootstrap3 仅支持块级帮助文本,不支持行内帮助文本.在文本输入框的后面,添加 .help-block 的元素,就可以为它添加块级帮助文本.如: <label class=&q ...
bootstrap3 表单构建器_Knex - 灵活轻便的 Node.js SQL 查询构建器
不管你承认与否,Node.js 都是一个后端语言平台.那么,操作数据库,这个后端最为常用的代码逻辑之一,Node.js 自然也需要拥有.我们当然也可以使用数据库驱动直接执行 SQL 语句,但我们往往需 ...
html中内联的form,bootstrap3.0教程之表单(form)使用详解
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 ...
Bootstrap3 横向表单/水平表单
横向表单通过为表单添加.form-horizontal类,并联合使用 Bootstrap的栅格类,便可以将label标签和控件组水平并排布局.这样做将改变.form-group的行为,使其表现为栅格 ...

Bootstrap3 表单静态控件

静态控件

Bootstrap3 表单静态控件相关推荐

最新文章

热门文章