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>
-
每一个你不满意的现在，都有一个你没有努力的曾经。