第一次接触神奇的Bootstrap表单


Posted in Javascript onJuly 27, 2016

本篇将主要介绍Bootstrap表单的使用技巧。

 1.Bootstrap基础表单

表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

我们先来看一个基础表单:

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>基础表单</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
 <form role="form">
 <div class="form-group">
 <label for="exampleInputEmail1">邮箱:</label>
 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label for="exampleInputPassword1">密码:</label>
 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的密码">
 </div>
 <div class="checkbox">
 <label><input type="checkbox">记住密码</label>
 </div>
 <button type="submit" class="btn btn-default">登录</button>
 </form> 
</body>
</html>

效果图如下所示:

第一次接触神奇的Bootstrap表单

我们还可以通过为form添加不同的类名达成不同的效果,form的具体规则如下表所示: 

 第一次接触神奇的Bootstrap表单

例如:

<form class="form-inline" role="form">...</form>

2.Bootstrap表单控件

1)输入框input

<form role="form">
 <div class="form-group">
 <!--必须添加type类型,如果没有指定type类型,将无法得到正确的样式-->
 <input type="email" class="form-control" placeholder="Enter email">
 </div>
</form>

2)下拉选择框select

<form role="form">
 <div class="form-group">
 <!--单行下拉选择框-->
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
 <div class="form-group">
 <!--多行选择框-->
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
</form>

3)文本域textarea

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
 <div class="form-group">
 <!--rows="3"设置高度三行-->
 <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

 4)复选框checkbox

垂直排列:

<form role="form">
 <div class="checkbox">
 <label><input type="checkbox" value="">复选框</label>
 </div>
</form>

 水平排列:

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline"><input type="checkbox" value="option1">复选框1</label>
 <label class="checkbox-inline"><input type="checkbox" value="option2">复选框2</label>
 </div>
</form>

5)单选择按钮radio

垂直排列:

<form role="form">
 <div class="radio">
 <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label>
 </div>
 <div class="radio">
 <!--不管是checkbox还是radio都使用label包起来了-->
 <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">B</label>
 </div>
</form>

 水平排列:

<form role="form">
 <div class="form-group">
 <label class="radio-inline"><input type="radio" value="option1" name="sex">A</label>
 <label class="radio-inline"><input type="radio" value="option2" name="sex">B</label>
 </div>
</form>

注意:checkbox连同label标签放置在一个名为“.checkbox”的容器内;radio连同label标签放置在一个名为“.radio”的容器内。

3.Bootstrap表单控件状态

1)焦点状态

焦点状态是通过为input添加类名form-control来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果。

<!--form-horizontal实现水平表单效果-->
<form role="form" class="form-horizontal">
 <div class="form-group">
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点状态">
 </div>
 </div> 
</form>

   2)禁用状态

只需要在需要禁用的表单控件上加上“disabled”即可:

<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

3)验证状态

做表单验证,同样也需要提供验证状态样式,在Bootstrap中同样提供这几种效果:

 第一次接触神奇的Bootstrap表单

使用的时候只需要在form-group容器上对应添加状态类名。

<form role="form">
 <div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </div>
 <div class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </div>
 <div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </div>
</form>

 效果图如下:

第一次接触神奇的Bootstrap表单

如果你想让表单在对应的状态下显示icon出来,只需要在对应的状态下添加类名“has-feedback”(此类名要与“has-error”、“has-warning”和“has-success”在一起)。

4.Bootstrap表单-按钮

1)定制风格按钮

<button class="btn" type="button">基础按钮</button> 
<button class="btn btn-default" type="button">默认按钮</button> 
<button class="btn btn-primary" type="button">主要按钮</button> 
<button class="btn btn-success" type="button">成功按钮</button> 
<button class="btn btn-info" type="button">信息按钮</button> 
<button class="btn btn-warning" type="button">警告按钮</button> 
<button class="btn btn-danger" type="button">危险按钮</button> 
<button class="btn btn-link" type="button">链接按钮</button>

 效果图如下:

第一次接触神奇的Bootstrap表单

2)Bootstrap按钮支持多标签,其他标签制作的按钮如下:

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
<a href="##" class="btn btn-default">a标签按钮</a>

3)按钮大小

通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。 

第一次接触神奇的Bootstrap表单

<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-lg" type="button">大型按钮</button> 
<button class="btn btn-primary btn-sm" type="button">小型按钮</button>

4)块状按钮(移动端用的多)

块状按钮:按钮宽度充满整个父容器(width:100%),不会有任何的padding和margin值。
Bootstrap提供了一个类名“btn-block”,按钮使用这个类名就可以实现块状按钮(具体源码请查阅bootstrap.css文件第2340行~第2353行)

<button class="btn-block btn-primary btn-lg" type="button">大型按钮</button> 
<button class="btn-block btn-primary" type="button">正常按钮</button>
<button class="btn-block btn-primary btn-sm" type="button">小型按钮</button>

效果图如下:

第一次接触神奇的Bootstrap表单

5.Bootstrap表单-按钮状态

在Bootstrap中针对按钮的状态效果主要分为两种:活动状态和禁用状态。

1)活动状态:主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。

2)禁用状态

要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”

 两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

6.Bootstrap图像

在Bootstrap中对于图像的样式风格提供以下几种风格:

第一次接触神奇的Bootstrap表单

使用方法:只需要在img标签上添加对应的类名,如下代码:

<img class="img-rounded" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-circle" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-thumbnail" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-responsive" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">

运行效果如下或查看右侧结果窗口:

第一次接触神奇的Bootstrap表单

7.Bootstrap图标

Bootstrap提供了200个不同的icon,如下:

第一次接触神奇的Bootstrap表单

使用方法:只需要在标签上添加对应的图标类名,如下代码:

<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

系列文章:

第一次接触神奇的Bootstrap基础排版https://3water.com/article/89278.htm
第一次接触神奇的Bootstrap网格系统https://3water.com/article/89333.htm

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

Javascript 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 #Javascript
基于jQuery实现页面搜索功能
Mar 26 #Javascript
JS中的数组方法笔记整理
Jul 26 #Javascript
jQuery实现日期联动效果实例
Jul 26 #Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 #Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 #Javascript
JavaScript从0开始构思表情插件
Jul 26 #Javascript
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
json数据的列循环示例
2013/09/06 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python中的随机函数小结
2018/01/27 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Python datetime 如何处理时区信息
2020/09/02 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
给老婆的保证书
2015/01/16 职场文书
教师节老师寄语
2015/05/28 职场文书
小学班主任心得体会
2016/01/07 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
python b站视频下载的五种版本
2021/05/27 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android