<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
<script src="../JS/jquery-3.2.1.min.js"></script>
<script src="../JS/bootstrap.js"></script>
</head>
<body style="height: 2000px;">
<div class="container"><!-- 容器 -->
<br><br>
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
<br><br>
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
<br><br>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary">按钮</a>
<a href="#" class="btn btn-primary">按钮</a>
</div>
<br><br>
<div class="btn-group btn-group-justified">
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
<br><br>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
</div>
<div class="btn-group">
<input type="button" value="按钮1" class="btn btn-primary">
</div>
</div>
<br><br>
<div class="btn-group btn-group-vertical">
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
<br><br>
<div class="btn-group btn-group-vertical btn-group-lg ">
<input type="button" value="按钮1" class="btn btn-primary">
<input type="button" value="按钮2" class="btn btn-primary">
<input type="button" value="按钮3" class="btn btn-primary">
</div>
<!-- 下拉列表 -->
<br><br>
<a href="#" class="btn btn-primary">按钮<span class="caret"></span> </a>
<button class="btn btn-primary">按钮<span class="caret"></span></button>
<input type="button" value="按钮1" class="btn btn-primary"><span class="caret"></span>
<br><br>
<div class="btn-group"><!-- a 和 button 可以做成相同的按钮 -->
<a href="#" class="btn btn-primary">按钮a</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
<br><br>
<button class="btn btn-primary">按钮button</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<br><br>
<div class="btn-group dropup">
<a href="#" class="btn btn-primary">按钮a</a>
<a href="#" class="btn btn-primary"><span class="caret"></span></a>
<br><br>
<button class="btn btn-primary">按钮button</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
<br><br>
<div class="github-style">
<div class="btn-group btn-group-lg">
<button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>Watch<span class="caret"></span></button>
<button class="btn btn-default">3,064</button>
</div>
<div class="btn-group btn-group-lg">
<button class="btn btn-default "><div class="glyphicon glyphicon-euro" ></div>Star<span class="caret"></span></button>
<button class="btn btn-default">36,064</button>
</div>
<div class="btn-group btn-group-lg">
<button class="btn btn-default active"><div class="glyphicon glyphicon-euro" ></div>fork<span class="caret"></span></button>
<button class="btn btn-default">3,064</button>
</div>
</div>
</div>
</body>
</html>
<!--
按钮组
btn-group(默认) :按钮按原来的大小连接在一起
btn-group-justified(按钮比例):按钮连接在一起,自适应容器的大小,按均分配大小,但只有对a标签可以自动做到,对于input 和 button 标签必须要在它们的每个外面加上父级且class="btn-group",如上面所示
btn-vertical (按钮方向):将横向的样式改为纵向的样式
btn-group-[lg sm xs]:按钮大小
class="btn-group"
class="btn-group btn-group-justified"
class="btn-group-vertical" 一般不再加btn-group否则四个角的样式不同
箭头:
向下:class="caret":<span class="caret"></span>
当按钮和图标组合使用时 ,应该尽量使用a 和 button ,因为input中的内容是通过value添加的,而不是inhtml ,所以添加的图标会出现在按钮的外部
向上:没有单独的class设置向上的箭头,但在父级的class中设置dropup 同时向下dropdown
-->
bootstrap-按钮组
最新推荐文章于 2023-10-11 10:21:17 发布