bootstrap按钮组

最新推荐文章于 2023-03-16 15:00:46 发布

taojYang

最新推荐文章于 2023-03-16 15:00:46 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_43293451/article/details/92430178

bootstrap 专栏收录该内容

26 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<style type="text/css">
		div{			
			position:relative;
			margin:10px 10px;
		}
	</style>
</head>
<body>
	<script src="jquery.min.js"></script>
	<link href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	<div class="btn btn-toolbar" role="toolbar" aria-label="study"><!--按钮工具栏-->
		<div class="btn-group btn-group-lg" role="group" aria-label="java"><!--lg,sm,xs-->
			<button class="btn btn-default">基础</button>
			<button class="btn btn-default">中级</button>
			<button class="btn btn-default">高级</button>
		</div>
		<div class="btn-group" role="group" aria-label="web">
			<button class="btn btn-default">html</button>
			<button class="btn btn-default">cs</button>
			<button class="btn btn-default">js</button>
		</div>
		<div class="btn-group" role="group" aria-label="framework">
			<button class="btn btn-default">struts</button>
			<button class="btn btn-default">spring</button>
			<button class="btn btn-default">hibernate</button>
		</div>
	</div>
	<br>
	<div class="btn btn-group-vertical" role="group" aria-label="web"><!--按钮组,vertical垂直排列-->
		<button class="btn btn-default">html</button>
		<button class="btn btn-default">css</button>
		<button class="btn btn-default">js</button>
	</div>
	<div class="btn btn-group" data-toggle="buttons">
		<label class="btn btn-default active">
			<input type="checkbox" checked="checked">dota
		</label>
		<label class="btn btn-default">
			 <input type="checkbox">wow
		</label>
		<label class="btn btn-default">
			<input type="checkbox">lol
		</label>
	</div>
	<div class="btn btn-group" data-toggle="buttons">
		<label class="btn btn-default active">
			<input type="radio" checked="checked">dota
		</label>
		<label class="btn btn-default">
			<input type="radio">wow
		</label>
		<label class="btn btn-default">
			<input type="radio">lol
		</label>
	</div>
</body>
</html>

在这里插入图片描述