Buttons are used widely in any website or app.
按钮在web应用中使用非常的广泛。
按钮类别(不同颜色传递不同信息)
<!DOCTYPE html> <html> <head> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- Standard button --> <!-- 标准按钮 --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <!-- 基本样式 --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <!-- 成功 --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <!-- 信息 --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <!-- 警告 --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <!-- 危险 --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <!-- 削弱按钮:变成超链接样式 --> <button type="button" class="btn btn-link">Link</button> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
按钮大小
<!DOCTYPE html> <html> <head> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- 大按钮 --> <button type="button" class="btn btn-primary btn-lg">Large button</button> <!-- 默认 --> <button type="button" class="btn btn-primary">Large button</button> <!-- 中号按钮 --> <button type="button" class="btn btn-primary btn-sm">Large button</button> <!-- 小号按钮 --> <button type="button" class="btn btn-primary btn-xs">Large button</button> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
将样式与大小进行组合来控制按钮的外观
<!-- 大小:大,样式:成功--> <button type="button" class="btn btn-primary btn-lg btn-success">Large button</button> <!-- 大小:默认,样式:消息--> <button type="button" class="btn btn-primary btn-info">Large button</button> <!-- 大小:小,样式:警告 --> <button type="button" class="btn btn-primary btn-sm btn-warning">Large button</button> <!-- 大小:超小,样式:危险 --> <button type="button" class="btn btn-primary btn-xs btn-danger">Large button</button>
与父容器等宽
To use the full width of the container within which the button is residing, Bootstrap 3 offers block button option.
使用按钮的block样式,让其与父容器等宽
<div class="container"> <div class="row"> <div class="col-lg-12"> <p> <button type="button" class="btn btn-primary btn-sm btn-block">Default small block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Default lg block level button</button> <button type="button" class="btn btn-primary btn-lg btn-block">Default lg block level button</button> <button type="button" class="btn btn-primary btn-xs btn-block">Default extra block level button</button> </p> </div> </div> </div>
禁用按钮
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">btn1</button> <button type="button" class="btn btn-primary" disabled="disabled">btn2</button> <button type="button" class="btn btn-primary btn-sm" disabled="disabled">btn3</button> <button type="button" class="btn btn-primary btn-xs" disabled="disabled">btn4</button>
将超链接变成按钮(保留链接功能),还可以设置为禁用,很强大噢!
role属性是为了提供更好的目标可达性
<a href="http://www.baidu.com" class="btn btn-default" role="button">Default</a> <a href="http://www.baidu.com" class="btn btn-primary disabled" role="button">Primary</a> <a href="http://www.baidu.com" class="btn btn-info" role="button">Info</a>
使用按钮样式实现Tag,很漂亮哈~
You may use button classes with button, a and input element to use buttons as tags. But it is recommended that you use it with button elements mostly. Otherwise it may cause cross browser inconsistency issues.
可以使用button样式做Tag
该样式建议多用于按钮元素,否则在不同浏览器下可能会发生问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="row"> <div class="col-lg-1"> <p> 默认样式 </p> <p> 使用button样式后 </p> </div> <div class="col-lg-1"> <p> <a href="#">Link</a> </p> <p> <a class="btn btn-success" href="#" role="button">Link</a> </p> </div> <div class="col-lg-1"> <p> <button type="submit">Button</button> </p> <p> <button class="btn btn-danger" type="submit">Button</button> </p> </div> <div class="col-lg-1"> <p> <input type="button" value="Input"> </p> <p> <input class="btn btn-danger" type="button" value="Input"> </p> </div> <div class="col-lg-1"> <p> <input type="submit" value="Submit"> </p> <p> <input class="btn btn-danger" type="submit" value="Submit"> </p> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
自定义按钮样式
<!-- 使用bootstrap提供的按钮样式 --> <button type="button" class="btn btn-default">Default</button> <!-- 自定义按钮样式 --> <button type="button" class="btn btn-my">Customized Button</button>
设置css背景
.btn-my { background: #cb60b3; /* Old browsers */ background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); /* Chrome,Safari4+ */ background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* IE10+ */ background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */ }
设置字体颜色
.btn-my{ color:#fff; }
将按钮变为圆形
.btn-my{ width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
最后,再添加鼠标悬停效果
.btn-my:hover { background: #BFEC3E; color:#e75616; }
相关推荐
Bootstrap 4切换Bootstrap 4 Toggle是一个Bootstrap插件/小部件,可将复选框转换为切换。图书馆分布项目描述支持bootstrap4(需要jQuery)支持bootstrap4 +(ES6类,没有依赖项)支持bootstrap4 +(React组件,没有...
bootstrap-crystal-buttons水晶样式按钮集合,里面包含各种bootstrap的水晶样式按钮
纯清除按钮Bootstrap + JQuery,输入清除按钮入门在您的项目中加载脚本。 < script src =" jquery.bootstrap-pureClearButton.js " > </ script > 将data-pure-clear-button属性添加到您的文本字段。 &...
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果。
自举方向按钮 引导程序的方向/箭头按钮 用法: 只需将类.btn-arrow-left或.btn-arrow-right添加到引导按钮。 在.btn-group内部使用可删除按钮之间的空间。 < button type =" button " class =" btn btn-...
Bootstrap风格的按钮 BButton ,BButton 是 UIButton 的子类,实现类似 Bootstrap 框架中的按钮风格。
与Bootstrap 3.3.7兼容! 灵感来源: ://eli.eliandlyndi.com/2011/10/10/using-jquery-to-provide-an-inline-confirmation-on-buttons/ 大事记 事件 数据 描述 “确认:之前” {} 首次点击时触发 “确认:已...
Bootstrap 3 教程 16 - 按钮组 以下视频教程的代码
React确认按钮 安装 npm install --save react-confirm-button 您可以根据需要安装bootstrap或material-ui或任何其他样式。 用法 import ConfirmButton from 'react-confirm-button' ; ... < p> Basic ...
Bootstrap 3 教程 90 - 加载按钮以下视频教程的代码
Bootstrap 3 教程 91 - 单个切换按钮 以下视频教程的代码
Bootstrap 3 教程 21 - 对齐按钮组 以下视频教程的代码
Bootstrap 3 教程 24 - 按钮下拉大小 以下视频教程的代码
Bootstrap 3 教程 19 - 按钮组嵌套 以下视频教程的代码
Bootstrap 3 教程 17 - 按钮组工具栏以下视频教程的代码
Bootstrap 3 教程 25 - 按钮组下拉变化以下视频教程的代码
Bootstrap 3 教程 20 - 按钮组垂直变化以下视频教程的代码
这是一款基于Bootstrap的超酷3D按钮设计效果。该3D按钮通过在按钮底部设置阴影效果来形成3D效果,并且在鼠标滑过按钮时,按钮有下凹的动画,效果非常的酷。
Bootstrap 3 教程 29 - 输入组按钮插件 以下视频教程的代码
Bootstrap 3 教程 30 - 输入组按钮下拉菜单 以下视频教程的代码