Bootstrap CSS——徽章和巨幕

最新推荐文章于 2025-07-19 16:11:01 发布

原创最新推荐文章于 2025-07-19 16:11:01 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #css

Bootstrap 专栏收录该内容

21 篇文章

订阅专栏

徽章：http://v3.bootcss.com/components/#badges
巨幕：http://v3.bootcss.com/components/#jumbotron
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>徽章</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<!--巨幕-->
    <div class="jumbotron">
        <div class="container">
            <h1>Hello world!</h1>
            <p>这是的垃圾死垃圾的法律纠纷鲁大师冻死了非计算机类风湿福建方老师就发了发生法律上浪费后附件山东我发货是佛好搜服送</p>
            <p><a class="btn btn-info btn-lg" href="#" role="button">Button</a> </p>
        </div>
    </div>


<!--徽章Badge-->
    <div class="container">

        <a href="#">短信消息<span class="badge">30</span> </a>

        <button class="btn btn-success" type="button">Message<span class="badge">20</span> </button>
    </div>

    <ul class="nav nav-pills" role="rablist">
        <li role="presentation" class="active"><a href="#">Home<span class="badge">20</span> </a> </li>
        <li role="presentation" class="active"><a href="#">Profile<span class="badge">100</span> </a> </li>
        <li role="presentation" class="active"><a href="#">Message<span class="badge">5</span> </a> </li>
    </ul>



</body>
</html>