编程 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 异步调用框架 (Part 2 - 用例设计)

Aug 03 Javascript

JavaScript 定义function的三种方式小结

Oct 16 Javascript

javascript中的array数组使用技巧

Jan 31 Javascript

$.getJSON在IE下失效的原因分析及解决方法

Jun 16 Javascript

JavaScript中Function详解

Feb 27 Javascript

浅谈jQuery双事件多重加载的问题

Oct 05 Javascript

jQuery加载及解析XML文件的方法实例分析

Jan 22 Javascript

js的OOP继承实现(必看篇)

Feb 18 Javascript

js提取中文拼音首字母的封装工具类

Mar 12 Javascript

微信小程序图片加载失败时替换为默认图片的方法

Dec 09 Javascript

vue基于Echarts的拖拽数据可视化功能实现

Dec 04 Vue.js

TypeScript实用技巧 Nominal Typing名义类型详解

Sep 23 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 printf输出格式使用说明

2010/12/05 PHP

基于PHP常用字符串的总结(待续)

2013/06/07 PHP

浅析Yii2 GridView 日期格式化并实现日期可搜索教程

2016/04/22 PHP

PHP 无限级分类

2017/05/04 PHP

php 读取文件夹下所有图片、文件的实例

2018/10/17 PHP

表单内同名元素的控制

2006/11/22 Javascript

JavaScript闭包实例讲解

2014/04/22 Javascript

JQuery下拉框应用示例介绍

2014/04/23 Javascript

jquery如何扑捉回车键触发的事件

2014/04/24 Javascript

自己封装的javascript事件队列函数版

2014/06/12 Javascript

JavaScript实现带播放列表的音乐播放器实例分享

2016/03/07 Javascript

浅述Javascript的外部对象

2016/12/07 Javascript

原生js实现电商侧边导航效果

2017/01/19 Javascript

Angular4学习笔记之新建项目的方法

2017/07/18 Javascript

js的函数的按值传递参数(实例讲解)

2017/11/16 Javascript

js实现一个简单的MVVM框架示例

2018/01/15 Javascript

vue的传参方式汇总和router使用技巧

2018/05/22 Javascript

详解Angular Forms中自定义ngModel绑定值的方式

2018/12/10 Javascript

vue 地区选择器v-distpicker的常用功能

2019/07/23 Javascript

Vue数字输入框组件的使用方法

2019/10/19 Javascript

Js代码中的span拼接问题解决

2019/11/22 Javascript

vue-cli设置css不生效的解决方法

2020/02/07 Javascript

简单了解常用的JavaScript 库

2020/07/16 Javascript

H5 js点击按钮复制文本到粘贴板

2020/11/19 Javascript

从列表或字典创建Pandas的DataFrame对象的方法

2019/07/06 Python

在macOS上搭建python环境的实现方法

2019/08/13 Python

Python列表list操作相关知识小结

2020/01/29 Python

django-crontab实现服务端的定时任务的示例代码

2020/02/17 Python

python实现一次性封装多条sql语句(begin end)

2020/06/06 Python

编写python代码实现简单抽奖器

2020/10/20 Python

汤米巴哈马官方网站：Tommy Bahama

2017/05/13 全球购物

儿科护理实习自我鉴定

2013/09/19 职场文书

桥梁与隧道工程专业本科生求职信

2013/10/08 职场文书

党的群众路线教育实践活动学习计划

2014/11/03 职场文书

谢师宴家长答谢词

2015/09/30 职场文书

技术入股合作协议书

2016/03/21 职场文书