Bootstrap系列 -- 13. 内联表单
有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"/>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>
记住密码 </label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
在label标签运用了一个类名“sr-only”,可以将label标签影藏起来
Bootstrap系列 -- 13. 内联表单的更多相关文章
- bootstrap 基础表单 内联表单 横向表单
bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:内联表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)
一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...
- Bootstrap3 表单-输出内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件.只适用于视口(viewport)至少在 768px 宽度时(视口宽 ...
- Bootstrap内联表单
有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...
- bootstrap: 内联表单;
<form class="form-inline"> <div class="form-group"> <label for=&q ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Bootstrap入门(五)表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
随机推荐
- 继续说一下2016里面的json功能(1)
首先先来测试数据,数据是使用之前的,就 不要在意这些细节了啊~ 借用上一篇的测试数据 ),Chinese int ,Math int) ,),(,),(,),(,null); 然后我们使用这个表里面生 ...
- MongoDB与衍生版的TokuMX对比
为什么会出现TokuMX呢? 查阅大量的资料和翻阅一些大牛的博客发现,MongoDB作为nosql派别的一个典型非关系型数据库其实存在许多缺陷不足之处. 然后肯定就会有有人跳出来,来做一个衍生的东西, ...
- 如何生成可变表头的excel
1.实现功能: 传入一个表头和数据,将数据导入到excel中. 为了便于项目的扩展,数据传入通过泛型集合传入,获取数据时,通过反射的方式获取,这样无论你的表头是多少项,我都能很方便的生成.另外为了便于 ...
- oracle--trunc与to_char的区别
trunc取得是天(可比较),而to_char取得是数值(可计算): 但trunc(date) 具有与to_char(date) 相似的功能,但有区别: trunc(sysdate,'cc') ...
- 理解 OpenStack + Ceph (8): 基本的 Ceph 性能测试工具和方法
本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...
- [转]ASP.Net篇之Session与Cookie
本文转自:http://www.cnblogs.com/japanbbq/archive/2011/08/31/2160494.html Session: Session是“会话”的意思,然而,因为h ...
- NOIP2003传染病控制[按层DFS]
题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染病,难以准确判别病毒携带 ...
- inverse理解
首先术语inverse 被翻译为反转的意思.inverse 制定了关联关系中的方向. 当set的inverse属性默认情况下,hibernate会按照持久化对象的属性变化来同步更新数据库. 得到两条s ...
- 转:设置Eclipse中的tab键为4个空格的完整方法
from: https://my.oschina.net/xunxun10/blog/110074 设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...
- 南邮oj[1401] 乘车费用
Description lqp家离学校十分十分远,同时他又没有钱乘taxi.于是他不得不每天早早起床,匆匆赶到公交车站乘车到学校.众所周知CZ是个公交车十分发达的地方,但是CZ的公交车十分的奇怪,lq ...