<!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>List Groups</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showListGroup', '#listGroup');
showHTMLContent('#showBadge', '#badge');
showHTMLContent('#showCustom', '#custom');
$(":checkbox[name='activeItem']").click(function() {
if (this.checked) {
$("[name='cpp']").addClass("active");
} else {
$("[name='cpp']").removeClass("active");
}
showHTMLContent('#showListGroup', '#listGroup');
});
$(":checkbox[name='disableItem']").click(function() {
if (this.checked) {
$("[name='java']").addClass("disabled");
} else {
$("[name='java']").removeClass("disabled");
}
showHTMLContent('#showListGroup', '#listGroup');
});
$(":checkbox[name='colorItem']").click(function() {
if (this.checked) {
$("[name='cpp']").addClass("list-group-item-success");
$("[name='java']").addClass("list-group-item-info");
$("[name='python']").addClass("list-group-item-warning");
$("[name='php']").addClass("list-group-item-danger");
} else {
$("[name='cpp']").removeClass("list-group-item-success");
$("[name='java']").removeClass("list-group-item-info");
$("[name='python']").removeClass("list-group-item-warning");
$("[name='php']").removeClass("list-group-item-danger");
}
showHTMLContent('#showListGroup', '#listGroup');
});
});
</script>
</head>
<body>
<div class="container">
<h1>列表组样式</h1>
<form role="form">
<div class="form-group">
<input type="checkbox" name="activeItem"> set C++ active <br>
<input type="checkbox" name="disableItem"> set Java disabled <br>
<input type="checkbox" name="colorItem"> color all items
</div>
</form>
<h2>代码</h2>
<pre id="showListGroup"></pre>
<h2>样式</h2>
<div id="listGroup">
<h3>列表</h3>
<ul class="list-group">
<li class="list-group-item" name="cpp">C++</li>
<li class="list-group-item" name="java">Java</li>
<li class="list-group-item" name="python">Python</li>
<li class="list-group-item" name="php">PHP</li>
</ul>
<h3>链接</h3>
<div class="list-group">
<a href="#" class="list-group-item" name="cpp">C++</a>
<a href="#" class="list-group-item" name="java">Java</a>
<a href="#" class="list-group-item" name="python">Python</a>
<a href="#" class="list-group-item" name="php">PHP</a>
</div>
</div>
<br><br>
<h1>带徽章</h1>
<h2>代码</h2>
<pre id="showBadge"></pre>
<h2>样式</h2>
<div id="badge">
<ul class="list-group">
<li class="list-group-item"><span class="badge">12</span> C++</li>
<li class="list-group-item"><span class="badge">23</span> Java</li>
<li class="list-group-item"><span class="badge">5</span> Python</li>
</ul>
</div>
<br><br>
<h1>自定义</h1>
<h2>代码</h2>
<pre id="showCustom"></pre>
<h2>样式</h2>
<div id="custom">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">C++</h4>
<p class="list-group-item-text">
C++是C语言的继承，它既可以进行C语言的过程化程序设计，
又可以进行以抽象数据类型为特点的基于对象的程序设计，
还可以进行以继承和多态为特点的面向对象的程序设计。
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Java</h4>
<p class="list-group-item-text">
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，
还摒弃了C++里难以理解的多继承、指针等概念，
因此Java语言具有功能强大和简单易用两个特征。
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Python</h4>
<p class="list-group-item-text">
Python, 是一种面向对象的解释型计算机程序设计语言，
由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。
</p>
</a>
</div>
</div>
<br><br>
</div>
</body>
</html>Bootstrap学习笔记 15 - List Groups
猜你喜欢
转载自blog.csdn.net/u011304970/article/details/78671842
今日推荐
周排行