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 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP fclose函数用法总结
2019/02/15 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
js类式继承与原型式继承详解
2016/04/07 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
canvas使用注意点总结
2013/07/19 HTML / CSS
预备党员思想汇报范文
2013/12/29 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
房屋认购协议书
2015/01/29 职场文书
安装工程师岗位职责
2015/02/13 职场文书
2016高考感言
2015/08/01 职场文书
教师学习心得体会范文
2016/01/21 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android