首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

详解Bootstrap创建表单的三种格式（一）

Posted in Javascript onJanuary 04, 2016

 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

 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创建表单的三种格式（一）

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 #Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 #Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 #Javascript
jQuery自动完成插件completer附源码下载
Jan 04 #Javascript
学习javascript面向对象 理解javascript对象
Jan 04 #Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 #Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 #Javascript
kubernetes(1) MutationObserver(1) SeaTable(1) OOP(1) Mysql8(2) tree shaking(1) Three.js(1) 条形码(1) HBuilder(1) celery(1)
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
mac下安装nginx和php
2013/11/04 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
Prototype Number对象 学习
2009/07/19 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
学习使用bootstrap基本控件（table、form、button）
2016/04/12 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python中单下划线_的常见用法总结
2018/07/10 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python shelve模块实现解析
2019/08/28 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
浅谈Python协程
2020/06/17 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
楼面部长岗位职责范本
2014/02/14 职场文书
气象学专业个人求职信
2014/03/15 职场文书
新年团拜会主持词
2014/04/02 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
招标承诺书
2014/08/30 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
简历中自我评价范文
2015/03/11 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Oracle 触发器trigger使用案例
2022/02/24 Oracle