知识点
任何带有 .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>