boostrap---btn
bootstrap入門教程，按鈕、按鈕風格、下拉菜單等javascript
本教程演示：css
bootstrap框架的按鈕、按鈕大小、按鈕風格、按鈕組、下拉菜單製做等。html
使用的版本：Bootstrap v2.3.2 。java
下面是頁面的截圖：jquery
示例代碼很簡單，後面會貼出完整代碼。bootstrap
這些東西很簡單，就簡單說幾個要點吧：框架
class='btn' ，使用了btn這個class類名，bootstrap自動給給你加上按鈕的樣式；ui
btn-small、btn-large等，能夠控制按鈕的大小；spa
btn-primary 、btn-danger 、btn-warning等，能夠改變按鈕的樣式風格，能夠按須要去使用這些class。htm
class='btn-group'，這樣就能夠聲明這是一個按鈕組，一個分組的按鈕，bootstrap會把第一個按鈕、最好一個按鈕圓角效果處理好，看起來會更美觀。
<span class='caret'></span>，這個就是上圖的三角形圖標元素。
貼出所有代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bootstrap demo</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src='js/jquery-1.9.1.min.js'></script>
<script type="text/javascript" charset="utf-8" src='bootstrap/js/bootstrap.js'></script>
</head>
<body >
<div class='container'>
<br>
<br>
按鈕、按鈕大小、按鈕風格<br>
<div class=''>
<a class='btn' href='javascript:;'>常規按鈕</a>
<a class='btn btn-small' href='javascript:;'>小按鈕</a>
<a class='btn btn-large' href='javascript:;'>主要按鈕</a>
<a class='btn btn-primary' href='javascript:;'>primary</a>
<a class='btn btn-danger' href='javascript:;'>danger</a>
<a class='btn btn-warning' href='javascript:;'>warning</a>
<a class='btn btn-success' href='javascript:;'>success</a>
<a class='btn btn-info' href='javascript:;'>info</a>
<a class='btn btn-inverse' href='javascript:;'>inverse</a>
</div>
<br>
按鈕組<br>
<div class='btn-group'>
<a class='btn ' href='javascript:;'>按鈕1</a>
<a class='btn ' href='javascript:;'>按鈕2</a>
<a class='btn ' href='javascript:;'>按鈕3</a>
</div>
<br>
<br>
<br>
下拉菜單<br>
<div class='btn-group'>
<a class='btn'>按鈕4</a>
<a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'><span class='caret'></span></a>
<ul class='dropdown-menu'>
<li><a href='javascript:;'>item1</a></li>
<li><a href='javascript:;'>item2</a></li>
<li><a href='javascript:;'>item3</a></li>
</ul>
</div>
</div>
</body>
</html>
-
每一个你不满意的现在，都有一个你没有努力的曾经。