编程 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 相关文章推荐

splice slice区别

Oct 09 Javascript

jquery里的each使用方法详解

Dec 22 Javascript

写自已的js类库需要的核心代码

Jul 16 Javascript

简单选项卡 js和jquery制作方法分享

Feb 26 Javascript

jQuery控制div实现随滚动条滚动效果

Jun 07 Javascript

jQuery中的100个技巧汇总

Dec 15 Javascript

JavaScript实现离开页面前提示功能【附jQuery实现方法】

Sep 26 jQuery

Vue之beforeEach非登录不能访问的实现（代码亲测）

Jul 18 Javascript

封装一下vue中的axios示例代码详解

Feb 16 Javascript

基于node+websocket+html实现腾讯课堂聊天室聊天功能

Mar 04 Javascript

JavaScript 类的封装操作示例详解

May 16 Javascript

Vue 组件注册全解析

Dec 17 Vue.js

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

显示程序执行时间php函数代码

2013/08/29 PHP

Smarty模板配置实例简析

2019/07/20 PHP

Thinkphp5.0 框架Model模型简单用法分析

2019/10/11 PHP

html下载本地

2006/06/19 Javascript

javascript dom 操作详解 js加强

2009/07/13 Javascript

JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

2013/04/28 Javascript

alert中断settimeout计时功能

2013/07/26 Javascript

JS性能优化笔记搜索整理

2013/08/21 Javascript

js实现数组去重、判断数组以及对象中的内容是否相同

2013/11/29 Javascript

jQuery UI设置固定日期选择特效代码分享

2015/08/27 Javascript

浅谈Nodejs应用主文件index.js

2016/08/28 NodeJs

JS 实现导航菜单中的二级下拉菜单的几种方式

2016/10/31 Javascript

浅谈ajax请求不同页面的微信JSSDK问题

2018/02/26 Javascript

vue中动态设置meta标签和title标签的方法

2018/07/11 Javascript

浅谈JS中几种轻松处理'this'指向方式

2019/09/16 Javascript

JS函数基本定义与用法示例

2020/01/15 Javascript

用Python的线程来解决生产者消费问题的示例

2015/04/02 Python

在Python中使用元类的教程

2015/04/28 Python

python绘图方法实例入门

2015/05/19 Python

深入解析Python中的上下文管理器

2016/06/28 Python

调试Django时打印SQL语句的日志代码实例

2019/09/12 Python

Django --Xadmin 判断登录者身份实例

2020/07/03 Python

来自全球大都市的高级街头服饰：Pegador

2018/01/03 全球购物

英国网上购买门：Direct Doors

2018/06/07 全球购物

Manuka Doctor英国官网：真正的麦卢卡蜂蜜和护肤品

2018/10/26 全球购物

财务会计专业个人求职信范本

2014/01/08 职场文书

机工车间主任岗位职责

2014/03/05 职场文书

银行竞聘上岗演讲稿

2014/09/12 职场文书

群众路线个人整改方案

2014/10/25 职场文书

2014年营业员工作总结

2014/11/18 职场文书

嘉宾邀请函

2015/01/31 职场文书

雨花台导游词

2015/02/06 职场文书

2016全国“质量月”活动标语口号

2015/12/26 职场文书

Python实现抖音热搜定时爬取功能

2022/03/16 Python

【海涛解说】史上最给力比赛，挑战DOTA极限

2022/04/01 DOTA

Valheim服务器 Mod修改安装教程【ValheimPlus】

2022/12/24 Servers