详解Bootstrap创建表单的三种格式(一)


Posted in Javascript onJanuary 04, 2016

 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

 Bootstrap表单类型分为三种格式:垂直或基本表单、内联表单、水平表单。

垂直或基本表单(display:block;)

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父 <form> 元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<!doctype html> 
<html lang="en"> 
 <head> 
  <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码--> 
  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="Keywords" content="关键词一,关键词二"> 
  <meta name="Description" content="网站描述内容"> 
  <meta name="Author" content="Yvette Lau"> 
  <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">   
  <title>BootstrapDemo</title> 
  <!--css js 文件的引入--> 
  <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"> 
 </head> 
 <body style="padding: 20px;"> 
  <div class = "col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
   <form role = "form"> 
    <div class = "form-group"> 
     <label for = "name">姓名</label> 
     <input type = "text" class = "form-control" id = "name" 
       placeholder = "请输入姓名"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "tel">电话号码</label> 
     <input type="text" class="form-control" id = "tel" 
       placeholder = "请输入您的电话号码"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "idCard">请上传身份证</label> 
     <input type = "file" id = "idCard"></input> 
    </div> 
    <div class = "form-group"> 
     <label for = "profession">选择职业</label> 
     <select id = "profession" class = "form-control"> 
      <option>软件工程师</option> 
      <option>测试工程师</option> 
      <option>硬件工程师</option> 
      <option>质量分析师</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <button type = "submit" class="btn-info btn-lg">提交</button> 
    </div> 
   </form> 
  </div> 
 </body> 
</html>

效果如下:

详解Bootstrap创建表单的三种格式(一)

如果我们将select的form-control去掉,并给input type = "file"加上form-control,看看效果如何。

详解Bootstrap创建表单的三种格式(一)

是不是能看出和上面效果的区别了呢?这样您大概明白form-control的作用了,它是设置外围的边框效果,包括宽、高、获取
焦点时form的样式。

内联表单(全部在同一行,display为inline-block)

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。

因为head部分的内容都是一样的,所以我们只列出body部分的内容。

<body style="padding: 20px;"> 
 <form role = "form" class="form-inline"> 
  <div class = "form-group"> 
   <label for = "name">姓名</label> 
   <input type = "text" class = "form-control" id = "name" placeholder = "请输入姓名"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "tel">电话号码</label> 
   <input type="text" class="form-control" id = "tel" placeholder = "请输入您的电话号码"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "idCard">请上传身份证</label> 
   <input type = "file" id = "idCard"></input> 
  </div> 
  <div class = "form-group"> 
   <label for = "profession">选择职业</label> 
   <select id = "profession" class = "form-control"> 
    <option>软件工程师</option> 
    <option>测试工程师</option> 
    <option>硬件工程师</option> 
    <option>质量分析师</option> 
   </select> 
  </div> 
  <div class="form-group"> 
   <button type = "submit" class="btn-info btn-lg">提交</button> 
  </div> 
 </form>   
</body>

显示效果:

详解Bootstrap创建表单的三种格式(一)

默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用水平表单时,您需要在表单控件上设置一个宽度。

使用 class .sr-only,可以隐藏内联表单的标签。

注:sr-only是展示给屏幕阅读器,而非是普通的读者看的。

其它元素在form的class为form-inline时,display为inLine-block;但是input tyoe = "file"却仍是display:block,可以看出其布局是有问题的,此时可以单独设置其display为inline-block;

水平表单(label和input等表单元素在同一行)

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:

     1、向父 <form> 元素添加 class .form-horizontal。
     2、把标签和控件放在一个带有 class .form-group 的 <div> 中。
     3、向标签添加 class .control-label。
     4、设置label和其兄弟div的宽度(因为input等默认宽度是100%)。

<body style="padding: 20px;"> 
 <form role = "form" class="form-horizontal"> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "name">姓名</label> 
   <div class="col-sm-2"> 
    <input type = "text" class = "form-control" id = "name" 
     placeholder = "请输入姓名"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "tel">电话号码</label> 
   <div class="col-sm-2"> 
    <input type="text" class="form-control" id = "tel" 
      placeholder = "请输入您的电话号码"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "idCard">请上传身份证</label> 
   <div class="col-sm-2"> 
    <input type = "file" id = "idCard" style="display:inline-block;"></input> 
   </div> 
  </div> 
  <div class = "form-group"> 
   <label class="col-sm-2 control-label" for = "profession">选择职业</label> 
   <div class="col-sm-2"> 
    <select id = "profession" class = "form-control"> 
     <option>软件工程师</option> 
     <option>测试工程师</option> 
     <option>硬件工程师</option> 
     <option>质量分析师</option> 
    </select> 
   </div> 
  </div> 
  <div class="form-group"> 
   <div class="col-sm-2 col-sm-offset-2"> 
    <button type = "submit" class="btn-info btn-lg">提交</button> 
   </div>    
  </div> 
 </form> 
</body>

效果:

详解Bootstrap创建表单的三种格式(一)

以上内容给大家介绍了Bootstrap创建表单的相关内容,希望大家喜欢。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
Vue基于NUXT的SSR详解
Oct 24 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
vue项目实现分页效果
Mar 24 Vue.js
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
学习javascript面向对象 理解javascript对象
Jan 04 #Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 #Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 #Javascript
You might like
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JavaScript字符串对象
2017/01/14 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
np.random.seed() 的使用详解
2020/01/14 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
民警个人对照检查剖析材料
2014/09/17 职场文书
2014年采购员工作总结
2014/11/18 职场文书
法制工作总结2015
2015/07/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
MySQL GRANT用户授权的实现
2021/06/18 MySQL