第一次接触神奇的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 相关文章推荐
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
jquery分割字符串的方法
Jun 24 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
微信小程序返回多级页面的实现方法
Oct 27 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php创建多级目录代码
2008/06/05 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python中shape计算矩阵的方法示例
2017/04/21 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Django中Model的使用方法教程
2018/03/07 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
经济学博士求职自荐信范文
2013/11/23 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
儿童生日会策划方案
2014/05/15 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
党员个人总结自评
2015/02/14 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript