第一次接触神奇的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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue模块移动组件的实现示例
May 20 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 文件上传功能实现代码
2009/06/24 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php数组和链表的区别总结
2019/09/20 PHP
JavaScript中的标签语句用法分析
2015/02/10 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
js实现星星打分效果
2020/07/05 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python实现针对中文排序的方法
2017/05/09 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
详解python中eval函数的作用
2019/10/22 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
自我鉴定范文300字
2013/10/01 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
中秋节寄语2015
2015/03/24 职场文书
会计岗位职责范本
2015/04/02 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏