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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
json字符串传到前台input的方法
Aug 06 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
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生成plist数据的方法
2015/06/16 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
围观tangram js库
2010/12/28 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python生成随机数的方法
2014/01/14 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
python中的数据结构比较
2019/05/13 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python实现超级玛丽游戏
2020/03/18 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
银行介绍信范文
2014/01/10 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
安全生产演讲稿
2014/05/09 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android