Bootstrap表单使用方法详解


Posted in Javascript onFebruary 17, 2017

一、表单布局

Bootstrap 提供了下列类型的表单布局:

--垂直表单(默认)
--内联表单
--水平表单

(1)垂直或基本表单

基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。

下面列出了创建基本表单的步骤:

--向父 <form> 元素添加 role="form"。
--把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
--向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form role="form"> 
 <div class="form-group"> 
 <label for="name">名称</label> 
 <input type="text" class="form-control" id="name" placeholder="请输入名称"> 
 </div> 
 <div class="form-group"> 
 <label for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 <p class="help-block">这里是块级帮助文本的实例。</p> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form>

Bootstrap表单使用方法详解

(2)内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline。

<form class="form-inline" role="form"> 
 <div class="form-group"> 
 <label class="sr-only" for="name">名称</label> 
 <input type="text" class="form-control" id="name" placeholder="请输入名称"> 
 </div> 
 <div class="form-group"> 
 <label class="sr-only" for="inputfile">文件输入</label> 
 <input type="file" id="inputfile"> 
 </div> 
 <div class="checkbox"> 
 <label> 
 <input type="checkbox">请打勾 
 </label> 
 </div> 
 <button type="submit" class="btn btn-default">提交</button> 
</form>

Bootstrap表单使用方法详解

默认情况下,Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时,您需要在表单控件上设置一个宽度。
注:使用 class .sr-only,您可以隐藏内联表单的标签。

(3)水平表单

水平表单与其他表单不仅标记的数量上不同,而且表单的呈现形式也不同。如需创建一个水平布局的表单,请按下面的几个步骤进行:
--向父 <form> 元素添加 class .form-horizontal。
--把标签和控件放在一个带有 class .form-group 的 <div> 中。
--向标签添加 class .control-label。

<form class="form-horizontal" role="form"> 
 <div class="form-group"> 
 <label for="firstname" class="col-sm-2 control-label">名字</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="lastname" class="col-sm-2 control-label">姓</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" id="lastname" placeholder="请输入姓"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <div class="col-sm-offset-2 col-sm-10"> 
 <div class="checkbox"> 
 <label> 
  <input type="checkbox">请记住我 
 </label> 
 </div> 
 </div> 
 </div> 
 <div class="form-group"> 
 <div class="col-sm-offset-2 col-sm-10"> 
 <button type="submit" class="btn btn-default">登录</button> 
 </div> 
 </div> 
</form>

Bootstrap表单使用方法详解

二、支持的表单控件

Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。

(1)输入框
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。
(2)文本框

(3)复选框和单选框
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。
(4)选择框

使用 multiple="multiple" 允许用户选择多个选项。

三、静态控件
当您需要在一个水平表单内的表单标签后放置纯文本时,请在 <p> 上使用 class .form-control-static。

四、表单控件状态

除了 :focus 状态外,Bootstrap 还为禁用的输入框定义了样式,并提供了表单验证的 class。

(1)输入框焦点
当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。

(2)禁用的输入框 input
如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

(3)禁用的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。

(4)验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

<form class="form-horizontal" role="form"> 
 <div class="form-group"> 
 <label class="col-sm-2 control-label">聚焦</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点..."> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="inputPassword" class="col-sm-2 control-label">禁用</label> 
 <div class="col-sm-10"> 
  <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled> 
 </div> 
 </div> 
 <fieldset disabled> 
 <div class="form-group"> 
  <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label> 
  <div class="col-sm-10"> 
  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> 
  </div> 
 </div> 
 <div class="form-group"> 
  <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label> 
  <div class="col-sm-10"> 
  <select id="disabledSelect" class="form-control"> 
   <option>禁止选择</option> 
  </select> 
  </div> 
 </div> 
 </fieldset> 
 <div class="form-group has-success"> 
 <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputSuccess"> 
 </div> 
 </div> 
 <div class="form-group has-warning"> 
 <label class="col-sm-2 control-label" for="inputWarning">输入警告</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputWarning"> 
 </div> 
 </div> 
 <div class="form-group has-error"> 
 <label class="col-sm-2 control-label" for="inputError">输入错误</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="inputError"> 
 </div> 
 </div> 
</form>

Bootstrap表单使用方法详解

五、表单控件大小
您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

<form role="form"> 
 <div class="form-group"> 
 <input class="form-control input-lg" type="text" placeholder=".input-lg"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control" type="text" placeholder="默认输入"> 
 </div> 
 <div class="form-group"> 
 <input class="form-control input-sm" type="text" placeholder=".input-sm"> 
 </div> 
 <div class="form-group"></div> 
 <div class="form-group"> 
 <select class="form-control input-lg"> 
  <option value="">.input-lg</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control"> 
  <option value="">默认选择</option> 
 </select> 
 </div> 
 <div class="form-group"> 
 <select class="form-control input-sm"> 
  <option value="">.input-sm</option> 
 </select> 
 </div> 
 <div class="row"> 
 <div class="col-lg-2"> 
  <input type="text" class="form-control" placeholder=".col-lg-2"> 
 </div> 
 <div class="col-lg-3"> 
  <input type="text" class="form-control" placeholder=".col-lg-3"> 
 </div> 
 <div class="col-lg-4"> 
  <input type="text" class="form-control" placeholder=".col-lg-4"> 
 </div> 
 </div> 
</form>

Bootstrap表单使用方法详解

六、表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块,请在 <input> 后使用 .help-block。

<form role="form"> 
 <span>帮助文本实例</span> 
 <input class="form-control" type="text" placeholder=""> 
 <span class="help-block">一个较长的帮助文本块,超过一行, 
 需要扩展到下一行。本实例中的帮助文本总共有两行。</span> 
</form>

Bootstrap表单使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript alert消息换行的方法
Aug 07 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
js键盘事件的keyCode
Jul 29 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
js实现微信聊天界面
Aug 09 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 #Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 #Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 #Javascript
数组Array的排序sort方法
Feb 17 #Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 #Javascript
数组Array的一些方法(总结)
Feb 17 #Javascript
深入理解javascript的getTime()方法
Feb 16 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
建立文件交换功能的脚本(一)
2006/10/09 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
javascript some()函数用法详解
2014/11/13 PHP
两款万能的php分页类
2015/11/12 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python多线程用法实例详解
2015/01/15 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python中的super()方法使用简介
2015/08/14 Python
Python实现的爬虫功能代码
2017/06/24 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Pytorch之Variable的用法
2019/12/31 Python
python speech模块的使用方法
2020/09/09 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
儿子婚宴答谢词
2014/01/09 职场文书
小学五年级学生评语
2014/04/22 职场文书
岗位工作说明书
2014/07/29 职场文书
早会开场白台词大全
2015/06/01 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL