Bootstrap如何创建表单


Posted in Javascript onOctober 21, 2016

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学习教程 Bootstrap实战教程

Javascript 相关文章推荐
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
bootstrap table小案例
Oct 21 #Javascript
jquery+Jscex打造游戏力度条
Sep 12 #Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 #Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
You might like
缓存技术详谈―php
2006/12/14 PHP
PHP 中文处理技巧
2010/04/25 PHP
php SQL Injection with MySQL
2011/02/27 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Node.js简单入门前传
2017/08/21 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python中装饰器学习总结
2018/02/10 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
十佳中学生事迹材料
2014/06/02 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
go goroutine 怎样进行错误处理
2021/07/16 Golang