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,看看效果如何。

Bootstrap如何创建表单

是不是能看出和上面效果的区别了呢?这样您大概明白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实战教程

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