编程 Javascript

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，看看效果如何。

是不是能看出和上面效果的区别了呢？这样您大概明白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实战教程

Bootstrap如何创建表单

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery.jstree 增加节点的双击事件代码

Jul 27 Javascript

jQuery事件绑定.on()简要概述及应用

Feb 07 Javascript

js鼠标移动时禁止选中文字

Feb 19 Javascript

浅谈原生JS实现jQuery的animate()动画示例

Mar 08 Javascript

使用BootStrap实现标签切换原理解析

Mar 14 Javascript

浅谈JS如何实现真正的对象常量

Jun 25 Javascript

vue 实现边输入边搜索功能的实例讲解

Sep 16 Javascript

如何使用vuex实现兄弟组件通信

Nov 02 Javascript

详解vue引入子组件方法

Feb 12 Javascript

JS实现的杨辉三角【帕斯卡三角形】算法示例

Feb 26 Javascript

WebGL学习教程之Three.js学习笔记(第一篇)

Apr 25 Javascript

vue使用prop可以渲染但是打印台报错的解决方式

Nov 13 Javascript

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

新浪新闻小偷

2006/10/09 PHP

php产生随机数的两种方法实例代码输出随机IP

2011/04/08 PHP

php通过array_shift()函数移除数组第一个元素的方法

2015/03/18 PHP

PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】

2016/10/14 PHP

json跟xml的对比分析

2008/06/10 Javascript

JavaScript 无符号右移运算符

2009/04/17 Javascript

JavaScript实现添加、查找、删除元素

2015/07/02 Javascript

BootStrap初学者对弹出框和进度条的使用感觉

2016/06/27 Javascript

微信小程序 Audio API详解及实例代码

2016/09/30 Javascript

js实现右键菜单功能

2016/11/28 Javascript

Jil,高效的json序列化和反序列化库

2017/02/15 Javascript

jQuery Jsonp跨域模拟搜索引擎

2017/06/17 jQuery

原生js实现简单的焦点图效果实例

2017/12/14 Javascript

细说webpack源码之compile流程-rules参数处理技巧(2)

2017/12/26 Javascript

layui实现table加载的示例代码

2018/08/14 Javascript

vue上传图片到oss的方法示例（图片带有删除功能）

2018/09/27 Javascript

[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭

2014/03/24 DOTA

利用信号如何监控Django模型对象字段值的变化详解

2017/11/27 Python

用Python写一段用户登录的程序代码

2018/04/22 Python

Python 移动光标位置的方法

2019/01/20 Python

python脚本开机自启的实现方法

2019/06/28 Python

对Pytorch中Tensor的各种池化操作解析

2020/01/03 Python

Django 自定义404 500等错误页面的实现

2020/03/08 Python

Django 解决上传文件时,request.FILES为空的问题

2020/05/20 Python

python安装和pycharm环境搭建设置方法

2020/05/27 Python

体育学院毕业生自荐信

2013/11/03 职场文书

仓库班组长岗位职责

2013/12/12 职场文书

幼儿园中班教学反思

2014/02/10 职场文书

学校法制宣传月活动总结

2014/07/03 职场文书

工作作风承诺书

2014/08/30 职场文书

个园导游词

2015/02/04 职场文书

工作收入证明模板

2015/06/12 职场文书

新学期开学标语2015

2015/07/16 职场文书

django上传文件的三种方式

2021/04/29 Python

Python OpenCV 图像平移的实现示例

2021/06/04 Python

python疲劳驾驶困倦低头检测功能的实现

2022/04/04 Python