Bootstrap学习笔记 15 - List Groups

最新推荐文章于 2024-04-21 20:49:41 发布

Cynhard85

最新推荐文章于 2024-04-21 20:49:41 发布

阅读量663

点赞数 1

分类专栏： Bootstrap 文章标签： bootstrap listgroup 学习笔记

本文链接：https://blog.csdn.net/u011304970/article/details/78671842

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了一种使用Bootstrap实现的列表组样式，并演示了如何通过简单的JavaScript代码来更改列表项的状态，包括设置活动状态、禁用状态及颜色变化。此外，还展示了如何使用徽章元素增强列表的表现力。

摘要由CSDN通过智能技术生成

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