编程 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单选模拟jQuery.select.js

Nov 12 Javascript

JS倒计时代码汇总

Nov 25 Javascript

深入探讨JavaScript String对象

Mar 09 Javascript

JavaScript_ECMA5数组新特性详解

Jun 12 Javascript

正则表达式(语法篇推荐)

Jun 24 Javascript

AngularJS模块详解及示例代码

Aug 17 Javascript

AngularJs bootstrap搭载前台框架——js控制部分

Sep 01 Javascript

原生JavaScript实现AJAX、JSONP

Feb 07 Javascript

JavaScript基本语法_动力节点Java学院整理

Jun 26 Javascript

JS实现模糊查询带下拉匹配效果

Jun 21 Javascript

Vue无限滑动周选择日期的组件的示例代码

Jul 18 Javascript

weui上传多图片,压缩,base64编码的示例代码

Jun 22 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

十大催泪虐心动漫电影，有几部你还没看

2020/03/04 日漫

编译php 5.2.14+fpm+memcached(具体操作详解)

2013/06/18 PHP

老生常谈PHP面向对象之注册表模式

2017/05/26 PHP

PDO操作MySQL的基础教程(推荐)

2017/08/18 PHP

PHP实现的策略模式简单示例

2017/08/25 PHP

Laravel框架实现的记录SQL日志功能示例

2018/06/19 PHP

jquery中ajax调用json数据的使用说明

2011/03/17 Javascript

基于jquery实现状态限定编辑的代码

2012/02/11 Javascript

jquery ajax跨域解决方法(json方式)

2014/02/04 Javascript

如何用jquery控制表格奇偶行及活动行颜色

2014/04/20 Javascript

推荐一个封装好的getElementsByClassName方法

2014/12/02 Javascript

javascript中键盘事件用法实例分析

2015/01/30 Javascript

使用Node.js为其他程序编写扩展的基本方法

2015/06/23 Javascript

JQuery悬停控制图片轮播——代码简单

2015/08/05 Javascript

JS获取复选框的值,并传递到后台的实现方法

2016/05/30 Javascript

jQuery获取table下某一行某一列的值实现代码

2017/04/07 jQuery

详解Js中的模块化是如何实现的

2017/10/18 Javascript

vue超时计算的组件实例代码

2018/07/09 Javascript

vue实现日历备忘录功能

2020/09/24 Javascript

JS实现网页端猜数字小游戏

2020/03/06 Javascript

vue实现购物车的监听

2020/04/20 Javascript

微信小程序实现modal弹出框遮罩层组件（可带文本框）

2020/12/20 Javascript

下载糗事百科的内容_python版

2008/12/07 Python

Pandas过滤dataframe中包含特定字符串的数据方法

2018/11/07 Python

Window环境下Scrapy开发环境搭建

2018/11/18 Python

使用python实现多维数据降维操作

2020/02/24 Python

如何编写python的daemon程序

2021/01/07 Python

普通院校学生的自荐信

2013/11/27 职场文书

业务员岗位职责范本

2013/12/15 职场文书

工业学校毕业生自荐信范文

2014/01/03 职场文书

优秀教师自我评价范文

2014/09/27 职场文书

高中语文教学反思范文

2016/02/16 职场文书

2016年法制宣传月活动总结

2016/04/01 职场文书

导游词之山东八大关

2019/12/18 职场文书

mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构

2022/04/20 MySQL

关于vue-router-link选择样式设置

2022/04/30 Vue.js