第一次接触神奇的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 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
vue动态设置页面title的方法实例
Aug 23 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php树型类实例
2014/12/05 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js查错流程归纳
2012/05/04 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[01:13]这,就是刀塔
2014/07/16 DOTA
Python struct.unpack
2008/09/06 Python
Python 内置函数complex详解
2016/10/23 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python opencv进行图像拼接
2020/03/27 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
专升本自我鉴定
2013/10/10 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
简短证婚人证婚词
2014/01/09 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
大型晚会策划方案
2014/02/06 职场文书
工作岗位说明书模板
2014/05/09 职场文书
物流专业自荐信
2014/05/23 职场文书
媒体宣传策划方案
2014/05/25 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
vue中 this.$set的使用详解
2021/11/17 Vue.js