bootstrap-响应式工具

最新推荐文章于 2024-09-13 09:10:07 发布

小白程序猿一枚

最新推荐文章于 2024-09-13 09:10:07 发布

阅读量249

点赞数

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/fgets__/article/details/121887660

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述
如下例子所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>响应式工具</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        .jumbotron{
            background: yellow;
        }
    </style>

</head>

<body>

    <div class="container">
        <!--巨幕-->
        <div class="jumbotron visible-lg">
            <h1 style="color: red">Hello, BootStrap!</h1>
        </div>

        <div class="jumbotron hidden-lg">
            <h1 style="color: blue">Hello, word!</h1>
        </div>

    </div>
</body>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>