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技术很烂的五个原因分析
Oct 28 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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类
2006/10/09 PHP
一篇入门的php Class 文章
2007/04/04 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
js右键菜单效果代码
2007/07/21 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Augularjs-起步详解
2016/07/08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python3.6简单反射操作示例
2018/06/14 Python
python简单验证码识别的实现方法
2019/05/10 Python
python调用私有属性的方法总结
2020/07/24 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
关于运动会的广播稿
2014/09/22 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers