【20】Bootstrap — 标签

最新推荐文章于 2024-08-24 18:01:28 发布

原创最新推荐文章于 2024-08-24 18:01:28 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #标签

本文展示了一个使用Bootstrap框架的网页示例，包括不同级别的标题与标签样式。通过引入Bootstrap CSS文件和jQuery、Bootstrap JS文件实现页面元素的美化和交互效果。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </head>
    <body style="padding-top: 20px;">
        <div class="bs-example">
            <h1>Example heading <span class="label label-default">New</span></h1>
            <h2>Example heading <span class="label label-default">New</span></h2>
            <h3>Example heading <span class="label label-default">New</span></h3>
            <h4>Example heading <span class="label label-default">New</span></h4>
            <h5>Example heading <span class="label label-default">New</span></h5>
            <h6>Example heading <span class="label label-default">New</span></h6>
        </div>
        <hr/>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
    </body>
</html>

bootstrap标签