编程 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的12个网站推荐

Apr 28 Javascript

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

Jun 22 Javascript

js判断请求的url是否可访问,支持跨域判断的实现方法

Sep 17 Javascript

JS实现密码框的显示密码和隐藏密码功能示例

Dec 26 Javascript

利用vue组件自定义v-model实现一个Tab组件方法示例

Dec 06 Javascript

Nuxt.js实战详解

Jan 18 Javascript

vue组件之间的数据传递方法详解

Apr 19 Javascript

node Buffer缓存区常见操作示例

May 04 Javascript

layui table单元格事件修改值的方法

Sep 24 Javascript

vue路由遍历生成复数router-link的例子

Oct 30 Javascript

JavaScript实现多层颜色选项卡嵌套

Sep 21 Javascript

解决Vue-cli无法编译es6的问题

Oct 30 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

通过ICQ网关发送手机短信的PHP源程序

2006/10/09 PHP

针对初学PHP者的疑难问答(1)

2006/10/09 PHP

转PHP手册及PHP编程标准

2006/12/17 PHP

php中array_multisort对多维数组排序的方法

2020/06/21 PHP

PHP判断函数是否被定义的方法

2019/06/21 PHP

PHP使用HTML5 FileApi实现Ajax上传文件功能示例

2019/07/01 PHP

thinkphp5 模型实例化获得数据对象的教程

2019/10/18 PHP

jquery.boxy插件的iframe扩展代码

2010/07/02 Javascript

javascript操作select元素实例分析

2015/03/27 Javascript

js/jquery判断浏览器类型的方法小结

2015/05/12 Javascript

js实现文本框支持加减运算的方法

2015/08/19 Javascript

判断数组的最佳方法(推荐)

2016/10/11 Javascript

JavaScript中的await/async的作用和用法

2016/10/31 Javascript

详谈$.data()的用法和作用

2017/02/13 Javascript

nodejs模块nodemailer基本使用-邮件发送示例(支持附件)

2017/03/28 NodeJs

ZeroClipboard.js使用一个flash复制多个文本框

2017/06/19 Javascript

JavaScrpt中如何使用 cookie 设置查看与删除功能

2017/07/09 Javascript

微信小程序之数据缓存的实例详解

2017/09/29 Javascript

nodejs简单实现TCP服务器端和客户端的聊天功能示例

2018/01/04 NodeJs

vue+django实现一对一聊天功能的实例代码

2019/07/17 Javascript

layer.prompt输入层的例子

2019/09/24 Javascript

微信小程序服务器日期格式化问题

2020/01/07 Javascript

[02:31]DOTA2帕克英雄基础教程

2013/11/26 DOTA

在Python的web框架中编写创建日志的程序的教程

2015/04/30 Python

Python使用Srapy框架爬虫模拟登陆并抓取知乎内容

2016/07/02 Python

Python OpenCV对本地视频文件进行分帧保存的实例

2019/01/08 Python

Django框架中序列化和反序列化的例子

2019/08/06 Python

python基础 range的用法解析

2019/08/23 Python

通过实例解析Python return运行原理

2020/03/04 Python

Python如何操作office实现自动化及win32com.client的运用

2020/04/01 Python

keras中的History对象用法

2020/06/19 Python

数学系个人求职信范文

2014/01/30 职场文书

英语邀请函范文

2015/02/02 职场文书

毕业感言怎么写

2015/07/31 职场文书

python识别围棋定位棋盘位置

2021/07/26 Python

python基础之类属性和实例属性

2021/10/24 Python