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

Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

Nov 12 Javascript

JS 实现点击a标签的时候让其背景更换

Oct 15 Javascript

jquery实现图片放大镜功能

Nov 23 Javascript

JavaScript+canvas实现七色板效果实例

Feb 18 Javascript

原生JS实现轮播效果+学前端的感受(防止走火入魔)

Aug 21 Javascript

js移动端图片压缩上传功能

Aug 18 Javascript

three.js加载obj模型的实例代码

Nov 10 Javascript

关于jquery layui弹出层的使用方法

Apr 21 jQuery

详解vue服务端渲染浏览器端缓存（keep-alive）

Oct 12 Javascript

JS重学系列之聊聊new操作符

Mar 04 Javascript

微信小程序下拉加载和上拉刷新两种实现方法详解

Sep 05 Javascript

Javascript如何递归遍历本地文件夹

Aug 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

基于MySQL到MongoDB简易对照表的详解

2013/06/03 PHP

PHP实现的基于单向链表解决约瑟夫环问题示例

2017/09/30 PHP

解析arp病毒背后利用的Javascript技术附解密方法

2007/08/06 Javascript

保证JavaScript和Asp、Php等后端程序间传值编码统一

2009/04/17 Javascript

Javascript 加载和执行-性能提高篇

2012/12/28 Javascript

关于JavaScript中name的意义冲突示例介绍

2014/05/29 Javascript

jQuery中:lt选择器用法实例

2014/12/29 Javascript

jquery超简单实现手风琴效果的方法

2015/06/05 Javascript

AngularJS的表单使用详解

2015/06/17 Javascript

javascript中if和switch，==和===详解

2015/07/30 Javascript

js 函数式编程学习笔记

2017/03/25 Javascript

jQuery实现table表格checkbox全选的方法分析

2018/07/04 jQuery

JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

2018/12/19 Javascript

react组件从搭建脚手架到在npm发布的步骤实现

2019/01/09 Javascript

javascript异步编程的六种方式总结

2019/05/17 Javascript

微信小程序tab切换可滑动切换导航栏跟随滚动实现代码

2019/09/04 Javascript

解决vue做详情页跳转的时候使用created方法数据不会更新问题

2020/07/24 Javascript

Vue实现菜单切换功能

2020/11/08 Javascript

python操作数据库之sqlite3打开数据库、删除、修改示例

2014/03/13 Python

用python脚本24小时刷浏览器的访问量方法

2018/12/07 Python

Python中PyQt5/PySide2的按钮控件使用实例

2019/08/17 Python

python实现PCA降维的示例详解

2020/02/24 Python

python 动态绘制爱心的示例

2020/09/27 Python

pycharm永久激活超详细教程

2020/10/29 Python

pytorch简介

2020/11/11 Python

分享29个基于Bootstrap的HTML5响应式网页设计模板

2015/11/19 HTML / CSS

Ted Baker英国官网：男士和女士服装及配件

2017/03/13 全球购物

医疗纠纷协议书

2014/04/16 职场文书

公务员爱岗敬业演讲稿

2014/08/26 职场文书

简单租房协议书（范本）

2014/10/13 职场文书

酒店辞职信怎么写

2015/02/27 职场文书

教师求职简历自我评价

2015/03/10 职场文书

数据库的高级查询六：表连接查询：外连接（左外连接，右外连接，UNION关键字，连接中ON与WHERE的不同）

2021/04/05 MySQL

新手必备Python开发环境搭建教程

2021/05/28 Python

5种方法告诉你如何使JavaScript 代码库更干净

2021/09/15 Javascript

win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法

2022/07/15 数码科技