知识点
任何带有 .btn 的元素都会继承圆角灰色按钮的默认外观；
<a>、<button> 或 <input>可以使用Bootstrap提供的按钮类样式；
类 | 描述
- | :-: | -:
.btn | 基本样式
.btn-default | 默认/标准按钮
.btn-primary | 首选项，未被操作的按钮
.btn-success | 表示成功的动作
.btn-info | 一般信息，该样式可用于要弹出信息的按钮
.btn-warning | 警告，表示需要谨慎操作的按钮
.btn-danger | 危险，表示一个危险动作的按钮操作
.btn-link | 让按钮看起来像一个链接
.btn-lg | 大尺寸按钮
.btn-sm | 小尺寸
.btn-xs | 超小尺寸
.btn-block | 块级按钮
.active | 按钮被点击
.disabled | 禁用
如果为 <button> 元素添加 disabled 属性，Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有阴影，目前Bootstrap开发团队还没有解决方案。
实践
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按钮</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<!--按钮-->
<div class="container">
<input type="button" value=".btn" class="btn"/>
<input type="button" value="（默认样式）Default" class="btn btn-default"/>
<input type="button" value="（首选项）Primary" class="btn btn-primary"/>
<input type="button" value="（成功）Success" class="btn btn-success"/>
<input type="button" value="（警告）Warning" class="btn btn-warning"/>
<input type="button" value="（危险）danger" class="btn btn-danger"/>
<input type="button" value="link，链接" class="btn btn-link"/>
<input type="button" value="大按钮，Primary，lg" class="btn btn-primary btn-lg"/>
<input type="button" value="小按钮，Primary，sm" class="btn btn-primary btn-sm"/>
<input type="button" value="超小按钮，Primary，xs" class="btn btn-primary btn-xs"/>
<input type="button" value="块级按钮" class="btn btn-primary btn-block"/>
<input type="button" value="active，激活状态" class="btn btn-primary active"/>
<input type="button" value="disabled，禁用状态" class="btn btn-primary disabled"/>
</div>
</body>
</html>
网友评论