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 - 输入组按钮下拉菜单 以下视频教程的代码