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 Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
浅析Vue 生命周期
Jun 21 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue-router 起步步骤详解
2019/03/26 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
18岁生日感言
2014/01/12 职场文书
社团活动总结
2014/04/28 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
周年庆典答谢词
2015/01/20 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP