- bootstrap按钮
- 对应链接：http://v3.bootcss.com/css/#buttons
- 使用时添加基础类class:btn
- 默认样式class=btn-default，控制大小class=btn-(lg | sm | xs)，没有btn-md，默认即为中等大小
- 一些简单的demo以及demo效果如下所示
-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.glyphicon-heart {font-size: 100px; color: red;}
</style>
</head>
<body> <div class="container">
<input type="button" value="按钮" class="btn" />
<input type="button" value="按钮" class="btn btn-default" />
<input type="button" value="按钮" class="btn btn-link" /> <br>
<input type="button" value="按钮" class="btn btn-primary" />
<input type="button" value="按钮" class="btn btn-primary btn-lg" />
<input type="button" value="按钮" class="btn btn-primary btn-sm" />
<input type="button" value="按钮" class="btn btn-primary btn-xs" /> <br><br>
<input type="button" value="按钮" class="btn btn-primary" />
<input type="button" value="按钮" class="btn btn-primary active" />
<input type="button" value="按钮" class="btn btn-primary disabled" /> <br><br>
<a href="#" value="按钮" class="btn btn-primary">按钮</a>
<button class="btn btn-primary">按钮</button>
<br><br>
<button class="btn btn-primary btn-block">按钮</button>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>
- 按钮组
- class=btn-group
- 若希望按钮组的宽度和容器宽度一样，则可设置class=btn-group-justified，需要注意的是在按钮组中只有a标签的可以和容器宽度一样，button和input标签均不能和容器同宽度
- 若希望按钮组垂直排列，则可设置class=btn-group-vertical
- btn-group一般不与btn-group-vertical同时使用
- 表示箭头上下的可以设置class=dropdown dropup
- 控制按钮组的大小class=btn-group-(lg | sm | xs)，以上的demo及demo效果如下所示
-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.glyphicon-heart {font-size: 100px; color: red;}
</style>
</head>
<body> <div class="container">
<div class="btn-group">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-primary">按钮3</button>
</div>
<br><br>
<div class="btn-group btn-group-justified">
<button href="#" class="btn btn-primary">按钮1</button>
<button href="#" class="btn btn-primary">按钮2</button>
<button href="#" class="btn btn-primary">按钮3</button>
</div>
<br><br>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮1</a>
<a href="#" class="btn btn-primary">按钮2</a>
<a href="#" class="btn btn-primary">按钮3</a>
</div>
<br>
<div class="btn-group-vertical">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-primary">按钮3</button>
</div>
<div class="btn-group-vertical btn-group-lg">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-primary">按钮3</button>
</div>
<div class="btn-group-vertical btn-group-sm">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-primary">按钮3</button>
</div>
<div class="btn-group-vertical btn-group-xs">
<button class="btn btn-primary">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-primary">按钮3</button>
</div>
<br><br>
<a href="#" class="btn btn-primary">按钮<span class="caret"></span></a>
<br><br>
<a href="#" class="btn btn-primary dropup">按钮<span class="caret"></span></a>
<br><br>
<div class="btn-group dropup">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
</div> </body>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
</html>