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

js如何判断用户是否是用微信浏览器

Jun 05 Javascript

手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

Jun 06 Javascript

js和jquery中循环的退出和继续学习记录

Sep 06 Javascript

angularJS 中$scope方法使用指南

Feb 09 Javascript

javascript中eval函数用法分析

Apr 25 Javascript

javascript中使用new与不使用实例化对象的区别

Jun 22 Javascript

详谈javascript精度问题与调整

Jul 08 Javascript

使用bootstrap实现下拉框搜索功能的实例讲解

Aug 10 Javascript

Vue模拟数据,实现路由进入商品详情页面的示例

Aug 31 Javascript

详解react阻止无效重渲染的多种方式

Dec 11 Javascript

判断文字超过2行添加展开按钮，未超过则不显示，溢出部分显示省略号

Apr 28 Javascript

node创建Vue项目步骤详解

Mar 06 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获取中国时间(上海时区时间)及美国时间的方法

2017/02/23 PHP

YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

2017/03/15 PHP

Js 获取当前日期时间及其它操作实现代码

2021/03/04 Javascript

原生Js实现按的数据源均分时间点幻灯片效果(已封装)

2010/12/28 Javascript

jquery 绑定回车动作扑捉回车键触发的事件

2014/03/26 Javascript

JavaScript极简入门教程（二）：对象和函数

2014/10/25 Javascript

js图片跟随鼠标移动代码

2015/11/26 Javascript

Bootstrap源码解读网格系统（3）

2016/12/22 Javascript

利用transition实现文字上下抖动的效果

2017/01/21 Javascript

jquery实现页面加载效果

2017/02/21 Javascript

Nodejs读取文件时相对路径的正确写法(使用fs模块)

2017/04/27 NodeJs

仿iPhone通讯录制作小程序自定义选择组件的实现

2019/05/23 Javascript

vue实现短信验证码登录功能（流程详解）

2019/12/10 Javascript

video.js添加自定义组件的方法

2020/12/09 Javascript

javascript实现数字时钟效果

2021/02/06 Javascript

[34:41]夜魇凡尔赛茶话会第二期02：你画我猜

2021/03/11 DOTA

Python中文件遍历的两种方法

2014/06/16 Python

Python Paramiko模块的使用实际案例

2018/02/01 Python

python监测当前联网状态并连接的实例

2018/12/18 Python

对Python强大的可变参数传递机制详解

2019/06/13 Python

Python读取VOC中的xml目标框实例

2020/03/10 Python

django xadmin中form_layout添加字段显示方式

2020/03/30 Python

python 写一个性能测试工具（一）

2020/10/24 Python

Python实现自动整理文件的脚本

2020/12/17 Python

美国网上书店：Barnes & Noble

2018/08/15 全球购物

德国电子产品购物网站：TechInTheBasket德国

2018/12/07 全球购物

Pretty Green美国：英式摇滚服饰风格代表品牌之一

2019/01/23 全球购物

size?爱尔兰官方网站：英国伦敦的球鞋精品店

2019/03/31 全球购物

Cult Gaia官网：美国生活方式品牌

2019/08/16 全球购物

什么时候需要进行强制类型转换

2016/09/03 面试题

四年的大学生生活自我评价

2013/12/09 职场文书

出生公证书

2015/01/23 职场文书

申论不会写怎么办？教您掌握这6点思维和原则

2019/07/17 职场文书

nginx 防盗链防爬虫配置详解

2021/03/31 Servers

学会Python数据可视化必须尝试这7个库

2021/06/16 Python

mysql 获取时间方式

2022/03/20 MySQL