详解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创建表单的相关内容,希望大家喜欢。

Javascript 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
js实现常见的工具条效果
Mar 02 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 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
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
PHP 柱状图实现代码
2009/12/04 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
js实现微博发布小功能
2017/01/12 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python常用运维脚本实例小结
2020/02/14 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
买卖合同协议书范本
2014/10/18 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python