知識(shí)點(diǎn)
任何帶有 .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀；
<a>、<button> 或 <input>可以使用Bootstrap提供的按鈕類樣式；
類 | 描述
- | :-: | -:
.btn | 基本樣式
.btn-default | 默認(rèn)/標(biāo)準(zhǔn)按鈕
.btn-primary | 首選項(xiàng)，未被操作的按鈕
.btn-success | 表示成功的動(dòng)作
.btn-info | 一般信息，該樣式可用于要彈出信息的按鈕
.btn-warning | 警告，表示需要謹(jǐn)慎操作的按鈕
.btn-danger | 危險(xiǎn)，表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作
.btn-link | 讓按鈕看起來(lái)像一個(gè)鏈接
.btn-lg | 大尺寸按鈕
.btn-sm | 小尺寸
.btn-xs | 超小尺寸
.btn-block | 塊級(jí)按鈕
.active | 按鈕被點(diǎn)擊
.disabled | 禁用
如果為 <button> 元素添加 disabled 屬性，Internet Explorer 9 及更低版本的瀏覽器將會(huì)把按鈕中的文本繪制為灰色，并帶有陰影，目前Bootstrap開(kāi)發(fā)團(tuán)隊(duì)還沒(méi)有解決方案。
實(shí)踐
<!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="（默認(rèn)樣式）Default" class="btn btn-default"/>
<input type="button" value="（首選項(xiàng)）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="（危險(xiǎn)）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="塊級(jí)按鈕" class="btn btn-primary btn-block"/>
<input type="button" value="active，激活狀態(tài)" class="btn btn-primary active"/>
<input type="button" value="disabled，禁用狀態(tài)" class="btn btn-primary disabled"/>
</div>
</body>
</html>
