bootstrap css样式之表单


Posted in Javascript onJanuary 19, 2017

本文实例为大家分享了bootstrap表单的具体代码,供大家参考,具体内容如下

1、表单基本用法

bootstrap css样式之表单

<form role="form">
 <div class="form-group">
 <label for="exampleInputEmail1">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 </div>
 <div class="form-group">
 <label for="exampleInputFile">File input</label>
 <input type="file" id="exampleInputFile">
 <p class="help-block">Example block-level help text here.</p>
 </div>
 <div class="checkbox">
 <label>
  <input type="checkbox"> Check me out
 </label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

2、内联表单

为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。

bootstrap css样式之表单

<form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
 </div>
 <div class="form-group">
 <div class="input-group">
  <div class="input-group-addon">@</div>
  <input class="form-control" type="email" placeholder="Enter email">
 </div>
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">Password</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
 </div>
 <div class="checkbox">
 <label>
  <input type="checkbox"> Remember me
 </label>
 </div>
 <button type="submit" class="btn btn-default">Sign in</button>
</form>

3、水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

bootstrap css样式之表单

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 <div class="col-sm-10">
  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <div class="checkbox">
  <label>
   <input type="checkbox"> Remember me
  </label>
  </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <button type="submit" class="btn btn-default">Sign in</button>
 </div>
 </div>
</form>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Node.js实现发送邮件功能
Nov 06 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 #Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 #Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 #Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 #Javascript
bootstrap组件之导航组件使用方法
Jan 19 #Javascript
bootstrap输入框组件使用方法详解
Jan 19 #Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
在python win系统下 打开TXT文件的实例
2018/04/29 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
小学美术教学反思
2014/02/01 职场文书
小学教师听课制度
2014/02/01 职场文书
甜品店创业计划书
2014/08/14 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
教师节主题班会教案
2015/08/17 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
mysql优化
2021/04/06 MySQL