知識點
任何帶有 .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>