How to hide div in bootstrap-Front-end Q&A-php.cn

How to hide div in bootstrap

WBOY

Release： 2022-05-07 15:57:17

Original

2792 people have browsed it

In bootstrap, you can use the class name of the div to hide the div. Use the hidden class name to make the div element invisible. Use the show class name to make the hidden div visible. The syntax is "

content of div
".

How to hide div in bootstrap

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

How to hide div with bootstrap

In bootstrap, the class name for displaying or hiding elements is provided, which can be very convenient for displaying or hiding an element.

Create a new html file, named test.html, to explain how to show or hide content in bootstrap. Use the link tag to load the bootstrap.min.css file.

Inside the div tag, use div to create two lines of text. Add the class attribute to the two divs and set their styles through class. Among them, the div with class set to test is hidden and invisible.

Use the hidden class name to make the child div elements invisible, and use the show class name to make the div with class test from hidden to visible.

<!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>
        .mydiv{
            width:400px;
            height:50px;
            background:#ccc;
        }
    .mydiv.test{
        display:none;
    }
    </style>
    <div class="mydiv">
        <div class="hidden">这是测试的内容1</div>
        <div class="test show">这是测试的内容2</div>
    </div>
</body>
</html>

Copy after login

Open the test.html file in the browser to check the effect.

Output results:

How to hide div in bootstrap

Summary:

1. Use the link tag to load the bootstrap.min.css file.

2. Within the div tag, use div to create two lines of text.

3. Add the class attribute to the two divs and set their styles through class. Among them, the div with class set to test is hidden and invisible.

4. Use the hidden class name to make the child div elements invisible, and use the show class name to make the div with class test from hidden to visible.

5. Open the test.html file in the browser to check the effect.

Related recommendations: bootstrap tutorial

The above is the detailed content of How to hide div in bootstrap. For more information, please follow other related articles on the PHP Chinese website!