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

为JavaScript提供睡眠功能(sleep) 自编译JS引擎

Aug 16 Javascript

无阻塞加载脚本分析[全]

Jan 20 Javascript

常见效果实现之返回顶部(结合淡入、淡出、减速滚动)

Jan 04 Javascript

Firefox和IE兼容性问题及解决方法总结

Oct 08 Javascript

JavaScript onkeydown事件入门实例(键盘某个按键被按下)

Oct 17 Javascript

jquery验证邮箱格式并显示提交按钮

Nov 07 Javascript

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

Jun 09 Javascript

js实现前端分页页码管理

Jan 06 Javascript

vue2.0父子组件间通信的实现方法

Apr 19 Javascript

微信小程序实现图片上传功能实例（前端+PHP后端）

Jan 10 Javascript

解决iview多表头动态更改列元素发生的错误的方法

Nov 02 Javascript

JavaScript常用进制转换及位运算实例解析

Oct 14 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 PDO中文乱码解决办法

2009/07/20 PHP

Eclipse的PHP插件PHPEclipse安装和使用

2014/07/20 PHP

PHP原生函数一定好吗？

2014/12/08 PHP

PHP两个n位的二进制整数相加问题的解决

2018/08/26 PHP

laravel 实现划分admin和home 模块分组

2019/10/15 PHP

改版了网上的一个js操作userdata

2007/04/27 Javascript

JQuery与JSon实现的无刷新分页代码

2011/09/13 Javascript

深入理解JavaScript系列(10) JavaScript核心（晋级高手必读篇）

2012/01/15 Javascript

JSuggest自动匹配下拉框使用方法(示例代码)

2013/12/27 Javascript

javascript写的一个模拟阅读小说的程序

2014/04/04 Javascript

我的Node.js学习之路（三）--node.js作用、回调、同步和异步代码以及事件循环

2014/07/06 Javascript

JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

2015/05/25 Javascript

JavaScript仿商城实现图片广告轮播实例代码

2016/02/06 Javascript

Web开发必知Javascript技巧大全

2016/02/23 Javascript

详解JavaScript中双等号引起的隐性类型转换

2016/05/30 Javascript

JS匿名函数实例分析

2016/11/26 Javascript

socket io与vue-cli的结合使用的示例代码

2018/11/01 Javascript

Vue实现简易翻页效果源码分享

2018/11/08 Javascript

Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)

2020/09/10 Javascript

python使用pil生成图片验证码的方法

2015/05/08 Python

Python补齐字符串长度的实例

2018/11/15 Python

python ipset管理增删白名单的方法

2019/01/14 Python

python TF-IDF算法实现文本关键词提取

2019/05/29 Python

pandas的qcut()方法详解

2019/07/06 Python

Python any()函数的使用方法

2019/10/28 Python

Ubuntu16.04安装python3.6.5步骤详解

2020/01/10 Python

python+requests实现接口测试的完整步骤

2020/10/27 Python

Alba Moda瑞士网上商店：独家意大利时尚女装销售

2016/11/28 全球购物

IWOOT美国：新奇的小玩意

2018/04/27 全球购物

英国现代家具和装饰网站：PN Home

2018/08/16 全球购物

Yahoo-PHP面试题2

2014/12/06 面试题

super关键字的用法

2012/04/10 面试题

Ajax主要包含了哪些技术

2014/06/12 面试题

中学生期末评语

2014/02/03 职场文书

国际贸易实训总结

2015/08/03 职场文书

Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布

2022/04/13 Python