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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php分页函数示例代码分享
2014/02/24 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
Javascript this 的一些学习总结
2012/08/31 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
Vuex提升学习篇
2018/01/11 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python实现图片文件批量重命名
2020/03/23 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
如何利用python发送邮件
2020/09/26 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
如何写毕业求职自荐信
2013/11/06 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python