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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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
输出控制类
2006/10/09 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
javascript cookies操作集合
2010/04/12 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
jQuery基础知识小结
2014/12/22 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python 元类使用说明
2009/12/18 Python
Python中的包和模块实例
2014/11/22 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python小进度条显示代码
2019/03/05 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
python安装后的目录在哪里
2020/06/21 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
《鸟岛》教学反思
2014/04/26 职场文书
公司年会策划方案
2014/05/17 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
python开发飞机大战游戏
2021/07/15 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android