bootstrap-响应式工具

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

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

结果如下
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/fgets__/article/details/121887660