Bootstarp学习教程（10）按钮组组件

最新推荐文章于 2021-09-21 23:38:39 发布

在奋斗的大道

最新推荐文章于 2021-09-21 23:38:39 发布

阅读量816

点赞数

分类专栏： Bootstrap 学习教程

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18413373

版权

Bootstrap 学习教程专栏收录该内容

14 篇文章 2 订阅

订阅专栏

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

<!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>

在奋斗的大道

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstarp学习教程（10）按钮组组件

按钮组：用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件，可以设置为单选框或多选框样式及行为。Demo-->--> 左中右按钮工具栏：把一组组合进一个做成更复杂的组件。左中右左中右左
复制链接

扫一扫