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中实现块作用域的方法
Apr 01 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
jquery css实现流程进度条
Mar 26 jQuery
Vue 自适应高度表格的实现方法
May 13 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中的integer类型使用分析
2010/07/27 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python如何实现异步调用函数执行
2019/07/08 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
最新pycharm安装教程
2020/11/18 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
护士个人简历自荐信
2013/10/18 职场文书
教育专业自荐书范文
2013/12/17 职场文书
幼教简历自我评价
2014/01/28 职场文书
爱耳日活动总结
2014/04/30 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
九九重阳节标语
2014/10/07 职场文书
导游词范文
2015/02/13 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
详解Laravel制作API接口
2021/05/31 PHP
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS