Bootstrap学习笔记 12

来源：互联网发布：宁波贸易软件定制编辑：程序博客网时间：2024/06/16 11:24
徽章：class="badge"
标签：class="label"
示例：
<!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>Badges and Labels</title>        <script>            function showHTMLContent(showElement, codeElement) {                $(showElement).html($('<div/>').text($(codeElement).html()).html());            }            $(function() {                showHTMLContent('#displayTestBadge', '#testBadge');                showHTMLContent('#displayTestLabel', '#testLabel');                $(":radio").click(function() {                    $("#labelTest").attr("class", $(this).val());                    showHTMLContent('#displayTestLabel', '#testLabel');                });            });        </script>    </head>    <body>        <div class="container">            <h1>徽章(Badge)</h1>            <h2>代码</h2>            <pre id="displayTestBadge"></pre>            <h2>样式</h2>            <div id="testBadge">                <a href="#">未读消息 <span class="badge">5</span></a><br><br>                <button type="button" class="btn btn-primary">评论 <span class="badge">12</span></button>            </div>            <br><br>            <h1>标签(Label)</h1>            <h2>选择样式</h2>            <form>                <input type="radio" name="style" value="label label-default" checked> label label-default <br>                <input type="radio" name="style" value="label label-primary"> label label-primary <br>                <input type="radio" name="style" value="label label-success"> label label-success <br>                <input type="radio" name="style" value="label label-info"> label label-info <br>                <input type="radio" name="style" value="label label-warning"> label label-warning <br>                <input type="radio" name="style" value="label label-danger"> label label-danger <br>            </form>            <h2>代码</h2>            <pre id="displayTestLabel"></pre>            <h2>样式</h2>            <div id="testLabel">                <h3>测试Label <span id="labelTest" class="label label-default">Label</span></h3>                                </div>        </div>    </body></html>
查看运行结果
阅读全文
1 0