编程 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操作Select 简单方便一个js插件搞定

Nov 12 Javascript

Array.prototype 的泛型应用分析

Apr 30 Javascript

自己动手实现jQuery Callbacks完整功能代码详解

Nov 25 Javascript

2种jQuery 实现刮刮卡效果

Feb 01 Javascript

nw.js实现类似微信的聊天软件

Mar 16 Javascript

基于jquery实现的仿优酷图片轮播特效代码

Jan 13 Javascript

详解javascript new的运行机制

Jan 26 Javascript

axios中cookie跨域及相关配置示例详解

Dec 20 Javascript

JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析

May 22 Javascript

node.js文件的复制、创建文件夹等相关操作

Feb 05 Javascript

js正则匹配markdown里的图片标签的实现

Mar 24 Javascript

Vue通过懒加载提升页面响应速度

May 10 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/10/09 PHP

ajax缓存问题解决途径

2006/12/06 PHP

php cookies中删除的一般赋值方法

2011/05/07 PHP

基于php冒泡排序算法的深入理解

2013/06/09 PHP

ThinkPHP使用Smarty第三方插件方法小结

2016/03/19 PHP

php实现的AES加密类定义与用法示例

2018/01/29 PHP

PHP封装cURL工具类与应用示例

2019/07/01 PHP

js不能跳转到上一页面的问题解决方法

2013/03/01 Javascript

Jquery选择子控件"大于号"和" "区别介绍及使用示例

2013/06/25 Javascript

Node.js 制作实时多人游戏框架

2015/01/08 Javascript

javascript跨域原因以及解决方案分享

2015/04/08 Javascript

如何使用jquery修改css中带有!important的样式属性

2016/04/28 Javascript

浅析js的模块化编写 require.js

2016/12/07 Javascript

Angular之指令Directive用法详解

2017/03/01 Javascript

搭建element-ui的Vue前端工程操作实例

2018/02/23 Javascript

JS将网址url转化为JSON格式的方法

2018/07/02 Javascript

Vue中keep-alive 实现后退不刷新并保持滚动位置

2020/03/17 Javascript

Python基于回溯法子集树模板解决旅行商问题（TSP）实例

2017/09/05 Python

Python创建一个空的dataframe,并循环赋值的方法

2018/11/08 Python

python实现二维插值的三维显示

2018/12/17 Python

Python实现字符型图片验证码识别完整过程详解

2019/05/10 Python

Python中的单下划线和双下划线使用场景详解

2019/09/09 Python

python 字典的打印实现

2019/09/26 Python

python scrapy重复执行实现代码详解

2019/12/28 Python

春节到了教你使用python来抢票回家

2020/01/06 Python

Stuarts London美国/加拿大：世界领先的独立男装零售商之一

2019/03/18 全球购物

英语文学专业学生的自我评价

2013/10/31 职场文书

迷你西餐厅创业计划书范文

2013/12/31 职场文书

就职演讲稿范文

2014/05/19 职场文书

小学捐书活动总结

2014/07/05 职场文书

民主评议党员自我鉴定

2014/10/21 职场文书

老公婚前保证书

2015/02/28 职场文书

nginx网站服务如何配置防盗链(推荐)

2021/03/31 Servers

使用@Value值注入及配置文件组件扫描

2021/07/09 Java/Android

NGINX 权限控制文件预览和下载的实现原理

2022/01/18 Servers

Java服务调用RestTemplate与HttpClient的使用详解

2022/06/21 Java/Android