`

Bootstrap 第17章 按钮和折叠插件

Bootstrap按钮折叠插件 
阅读更多 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>按钮插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 200px;">

<button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button>

<div class="btn-group" data-toggle="buttons">
	<label for="" class="btn btn-primary active">
		<input type="radio" name="sex" value="男" checked>男
	</label>
	<label for="" class="btn btn-primary">
		<input type="radio" name="sex" value="女">女
	</label>
</div>

<div class="btn-group" data-toggle="buttons">
	<label for="" class="btn btn-primary active">
		<input type="checkbox" name="fa" value="体育" checked>体育
	</label>
	<label for="" class="btn btn-primary">
		<input type="checkbox" name="fa" value="音乐">音乐
	</label>
	<label for="" class="btn btn-primary">
		<input type="checkbox" name="fa" value="艺术">艺术
	</label>
	<label for="" class="btn btn-primary">
		<input type="checkbox" name="fa" value="电脑">电脑
	</label>
</div>

<button id="#btn" class="btn btn-primary" data-loading-text="Loading..." autocomplete="off">开始上传</button>

<!-- <button class="btn btn-primary" autocomplete="off">按钮</button> -->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	$('button').on('click', function () {
		var btn = $(this).button('loading');
		setTimeout(function () {
			btn.button('reset');
		}, 1000);
	});
	// $('button').on('click', function () {
	// 	$(this).button('toggle');
	// });
</script>
</body>
</html>

效果图：

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>按钮插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 100px;">

<!-- <button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>
<div class="collapse" id="content">
	<div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。</div>
</div> -->

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse">
			<div class="panel-body">
				第一部分内容
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				第二部分内容
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				第三部分内容
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分链接</a>
			</h4>
		</div>
		<div id="collapseFour" class="panel-collapse collapse">
			<div class="panel-body">
				第四部分内容
			</div>
		</div>
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

效果图：

 

 

  • 大小: 3.5 KB
  • 大小: 5.3 KB
1
顶
1
踩
分享到：
| Bootstrap 第16章 弹出框和警告框插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics