编程 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 相关文章推荐

在IE和VB中支持png图片透明效果的实现方法(vb源码打包)

Apr 01 Javascript

js 一个关于图片onload加载的事

Nov 10 Javascript

javascript:FF/Chrome与IE动态加载元素的区别说明

Jan 26 Javascript

JavaScript包装对象使用详解

Jul 09 Javascript

只要1K 纯JS脚本送你一朵3D红色玫瑰

Aug 09 Javascript

Vue表单实例代码

Sep 05 Javascript

详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

Sep 14 Javascript

Bootstrap表格使用方法详解

Feb 17 Javascript

微信小程序分页加载的实例代码

Jul 11 Javascript

vue中引用阿里字体图标的方法

Feb 10 Javascript

Vue自定义指令结合阿里云OSS优化图片的实现方法

Nov 12 Javascript

js实现炫酷光感效果

Sep 05 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

PHP goto语句简介和使用实例

2014/03/11 PHP

简单的php新闻发布系统教程

2014/05/09 PHP

PHP中的一些常用函数收集

2015/05/26 PHP

php抓取网站图片并保存的实现方法

2015/10/29 PHP

Zend Framework动作助手Redirector用法实例详解

2016/03/05 PHP

javascript full screen 全屏显示页面元素的方法

2013/09/27 Javascript

JavaScript编程的10个实用小技巧

2014/04/18 Javascript

jquery制作LED 时钟特效

2015/02/01 Javascript

jQuery中(function($){})(jQuery)详解

2015/07/15 Javascript

jquery衣服颜色选取插件效果代码分享

2015/08/28 Javascript

基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项，一个下拉菜单和登录表单导航条)

2016/07/22 Javascript

javascript中活灵活现的Array对象详解

2016/11/30 Javascript

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

2017/12/14 Javascript

nodejs操作mongodb的填删改查模块的制作及引入实例

2018/01/02 NodeJs

vue计算属性computed、事件、监听器watch的使用讲解

2019/01/21 Javascript

vue 实现路由跳转时更改页面title

2019/11/05 Javascript

微信小程序实现点击按钮后修改颜色

2019/12/05 Javascript

Python的类实例属性访问规则探讨

2015/01/30 Python

Python的Urllib库的基本使用教程

2015/04/30 Python

使用Python编写爬虫的基本模块及框架使用指南

2016/01/20 Python

Python 模板引擎的注入问题分析

2017/01/01 Python

解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题

2018/10/17 Python

Python基本socket通信控制操作示例

2019/01/30 Python

PyCharm2019安装教程及其使用(图文教程)

2019/09/29 Python

浅析Django中关于session的使用

2019/12/30 Python

Python浮点型（float）运算结果不正确的解决方案

2020/09/22 Python

Python try except finally资源回收的实现

2021/01/25 Python

使用html5+css3来实现slider切换效果告别javascript+css

2013/01/08 HTML / CSS

个人求职信范例

2014/01/29 职场文书

授权收款委托书

2014/09/23 职场文书

2014财务年终工作总结

2014/12/08 职场文书

公司租车协议书

2015/01/29 职场文书

幼儿园教师师德承诺书

2015/04/28 职场文书

服装店员工管理制度

2015/08/07 职场文书

浅谈Redis中的RDB快照

2021/06/29 Redis

天谕手游15杯全调酒配方和调酒券的获得方式

2022/04/06 其他游戏