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--将表单设置为内联 ...
随机推荐
- hibernate连接数据库和反向工程
一.JSP界面连接数据库: 导包:将11个包倒进web-inf的lib目录下: 二.建立hibernate.cfg.xml的配置文件:!注意:是放到项目SRC目录下: 三.将视图切换到java下,在左 ...
- mvn archetype:create报错解决办法
执行下列命令:mvn archetype:create -DgroupId=com.mycompany.app -DartifactId=my-app -X 会报错: 此时将archetype:cr ...
- x01.Game.CubeRun: 风一样的女子
1.题解 小孩学英语比较有意思,Monkey three => 猴三,风一样的女子 => 风 Girl.诸如此类不是重点,重点是一花一世界,一草一天堂.花花草草,纷纷扰扰.大千世界,当别具 ...
- 在JazzyViewPager中调用其它layout布局xml并使用
开源地址:https://github.com/jfeinstein10/JazzyViewPager 发现网上的例子使用的是直接创建的一个TextView来做的.但是实际上使用,不可能只有这一个控件 ...
- 聚合及UML表示
聚合聚合是一种特别类型的关联,用于描述“总体到局部”的关系. 聚合分成: 基本聚合与合成聚合 基本聚合: 基本聚合一般也简称为聚合(Aggregation).在基本的聚合关系中, 部分类(B) ...
- mysql禁用autocommit,以及遇到的问题
原文地址:http://blog.51yip.com/mysql/1230.html http://blog.csdn.net/ying_593254979/article/details/12095 ...
- linux 下 mysql 安装(不用编译的方式)
环境是centos6.x.相信其他的也大同小异.相对来说这种方式我用的比较多. 一些环境依赖表库: yum install perl yum install libaio 1)下载:在mysql的网站 ...
- PowerDesigner新装后的设置
1.设置name不自动等于code 1.1菜单栏选择tools,选择general Options,打开如图1所示界面 1.2选择Dialog,勾掉红框中复选框,点OK即可
- 磁盘、分区及Linux文件系统 [Disk, Partition, Linux File System]
1.磁盘基础知识 1.1 物理结构 硬盘的物理结构一般由磁头与碟片.电动机.主控芯片与排线等部件组成:当主电动机带动碟片旋转时,副电动机带动一组(磁头)到相对应的碟片上并确定读取正面还是反面的碟面,磁 ...
- [转]forever: 让nodejs应用后台执行
在LINUX中我们可以使用这种简单的方式让node.js在后台运行: nohup node your_app.js & forever可以让我们做得更好,并且可以跨平台的在windows和Li ...