<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Panels</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showPanel', '#panel');
showHTMLContent('#showPanelGroup', '#panelGroup');
$(":checkbox[name='showHeader']").click(function() {
if (this.checked) {
$("[name='panelHeading']").removeClass("hidden");
} else {
$("[name='panelHeading']").addClass("hidden");
}
showHTMLContent('#showPanel', '#panel');
});
$(":checkbox[name='showFooter']").click(function() {
if (this.checked) {
$("[name='panelFooter']").removeClass("hidden");
} else {
$("[name='panelFooter']").addClass("hidden");
}
showHTMLContent('#showPanel', '#panel');
});
});
</script>
</head>
<body>
<div class="container">
<h1>Panel样式</h1>
<form role="form">
<div class="form-group">
<input type="checkbox" name="showHeader"> Show Header <br>
<input type="checkbox" name="showFooter"> Show Footer
</div>
</form>
<h2>代码</h2>
<pre id="showPanel"></pre>
<h2>样式</h2>
<div id="panel">
<div class="panel panel-default">
<div class="panel-heading hidden" name="panelHeading">Panel Heading</div>
<div class="panel-body">Panel Contents</div>
<div class="panel-footer hidden" name="panelFooter">Panel Footer</div>
</div>
</div>
<br><br>
<h1>Panel Group</h1>
<h2>代码</h2>
<pre id="showPanelGroup"></pre>
<h2>样式</h2>
<div id="panelGroup">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<br><br>
</div>
</body>
</html>Bootstrap学习笔记 16 - Panels
猜你喜欢
转载自blog.csdn.net/u011304970/article/details/78671928
今日推荐
周排行