Home >Web Front-end >Front-end Q&A >How to hide div in bootstrap
How to hide div in bootstrap
- WBOYOriginal
- 2022-05-07 15:57:172830browse
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".
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>Open the test.html file in the browser to check the effect.
Output results:
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!