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--将表单设置为内联 ...
随机推荐
- python极客学院爬虫V1
定向爬取极客学院视频,原本只有年费VIP只能下载,经过分析,只要找个免费体验VIP即可爬取所有视频 涉及的基本技术:python xpath 正则 com+ 通过python调用迅雷从组件,实现自动创 ...
- Linux IPC POSIX 信号量
模型 #include<semaphore.h> #include<sys/stat.h> #include<fcntl.h> sem_open() //初始化并打 ...
- PHP5.2至5.6的新增功能详解
截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护 [注] 的 PHP5.2, 其余的一半用户在使用 PHP5.3 [注]. 因为 PHP ...
- android 利用线程刷新UI方法
新建线程new Thread(new Runnable() 线程方法:public void run() private void setAddWidgetEnabled(boolean enable ...
- 利用NuSoap开发WebService(PHP)
利用NuSoap开发WebService(PHP) 分类: php 2010-09-08 12:00 5005人阅读 评论(1) 收藏 举报 webservicephpsoapstringencodi ...
- 用U盘制作启动盘后空间变小的恢复方法,清除U盘启动盘空间
先把u盘插好,运行cmd, 输入diskpart,回车, (输入list disk,回车,能看到磁盘大致情况,u盘一般是磁盘1) 再输入select disk 1,回车, 再输入clean,回车, 关 ...
- corefile 设置
程序运行的过程中,可能会因为一些隐藏的bug导致崩溃,为了在出问题时,及时记录所在环境的情况,所以要设置core文件的产生.其实其本质就是把进程的内存保存到文件中去. 1.core文件的生成开关和大小 ...
- shell流程控制
if语句 判断条件用[]包裹起来 if [ $a > $b ] then echo ‘a > b’ elif [ $a < $b ] then echo ‘a < b’ els ...
- mac 启动apache服务
启动服务:sudo /usr/sbin/apachectl start 停止服务:sudo /usr/sbin/apachectl stop 重启服务:sudo /usr/sbin/apachectl ...
- java 常见数据类型
int 4字节 -2 147 483 648-2 147 483 647(正好超过20亿) short 2字节 -32 768-32 767 long 8字节 -9 223 372 036 854 7 ...