bootstrap怎么让div隐藏

2022-05-07 16:59:57 IT技术网互联网

浏览

在bootstrap中，可以利用设置p的类名来让p隐藏，使用hidden类名可以让p元素隐藏不可见，使用show类名可以让隐藏的p变成可见，语法为“<p class="hidden">p的内容</p>”。

本教程操作环境：Windows10系统、bootstrap3.3.7版、DELL G3电脑

bootstrap怎么让p隐藏

在bootstrap中，提供了显示或隐藏元素的类名，可以非常方便显示或隐藏一个元素。

新建一个html文件，命名为test.html，用于讲解bootstrap中如何显示或隐藏内容。使用link标签加载bootstrap.min.css文件。

在p标签内，再使用p创建两行文字。给两个p添加class属性，并通过class设置它们的样式，其中，设置class为test的p隐藏不可见。

使用hidden类名让子p元素隐藏不可见，使用show类名让class为test的p由隐藏变为可见。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
    <style>
        .myp{
            width:400px;
            height:50px;
            background:#ccc;
        }
    .myp.test{
        display:none;
    }
    </style>
    <p class="myp">
        <p class="hidden">这是测试的内容1</p>
        <p class="test show">这是测试的内容2</p>
    </p>
</body>
</html>

在浏览器打开test.html文件，查看实现的效果。

输出结果：