Bootstarp学习教程(10) 按钮组组件分析

阿里 阅读:145 2021-04-01 00:26:05 评论:0

按钮组:用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件,可以设置为单选框或多选框样式及行为。

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="btn-group"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
	</div> 
</body>

按钮工具栏:把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。

<body> 
	<!--容器  --> 
	<div class="container"> 
	    <div class="btn-toolbar"> 
		<div class="btn-group"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		<div class="btn-group"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		<div class="btn-group"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		</div> 
	</div> 
</body>


尺寸:只要给.btn-group加上.btn-group-*,而不是给组中每个按钮都应用大小类。

<body> 
	<!--容器  --> 
	<div class="container"> 
	    <div class="btn-toolbar"> 
		<div class="btn-group btn-group-lg"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		<div class="btn-group"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		<div class="btn-group btn-group-sm"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		<div class="btn-group btn-group-xs"> 
			<button type="button" class="btn btn-default">左</button> 
			<button type="button" class="btn btn-default">中</button> 
			<button type="button" class="btn btn-default">右</button> 
		</div> 
		</div> 
	</div> 
</body> 




嵌套:想要把下拉菜单混合到一系列按钮中,就把.btn-group放入另一个.btn-group中。

	<div class="btn-group"> 
			<button type="button" class="btn btn-default">1</button> 
			<button type="button" class="btn btn-default">2</button> 
 
			<div class="btn-group"> 
				<button type="button" class="btn btn-default dropdown-toggle" 
					data-toggle="dropdown"> 
					下来菜单 <span class="caret"></span> 
				</button> 
				<ul class="dropdown-menu"> 
					<li><a href="#">链接一</a> 
					</li> 
					<li><a href="#">链接二</a> 
					</li> 
				</ul> 
			</div> 
		</div>

垂直排列:让一组按钮竖直显示而不是水平显示。

	<div class="btn-group-vertical"> 
			<button type="button" class="btn btn-default">1</button> 
			<button type="button" class="btn btn-default">2</button> 
 
			<div class="btn-group"> 
				<button type="button" class="btn btn-default dropdown-toggle" 
					data-toggle="dropdown"> 
					下来菜单 <span class="caret"></span> 
				</button> 
				<ul class="dropdown-menu"> 
					<li><a href="#">链接一</a> 
					</li> 
					<li><a href="#">链接二</a> 
					</li> 
				</ul> 
			</div> 
		</div>




声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号