부트스트랩에서 div를 숨기는 방법-프런트엔드 Q&A-php.cn

부트스트랩에서 div를 숨기는 방법

WBOY

풀어 주다： 2022-05-07 15:57:17

원래의

2784명이 탐색했습니다.

부트스트랩에서는 div의 클래스 이름을 사용하여 div 요소를 숨길 수 있습니다. 숨겨진 div를 표시하려면 표시 클래스 이름을 사용하세요. 클래스 ="hidden">div의 콘텐츠".

부트스트랩에서 div를 숨기는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩에서 div를 숨기는 방법

부트스트랩에서는 요소를 표시하거나 숨기는 클래스 이름이 제공됩니다. 이는 요소를 표시하거나 숨기는 데 매우 편리합니다.

부트스트랩에서 콘텐츠를 표시하거나 숨기는 방법을 설명하기 위해 test.html이라는 새 HTML 파일을 만듭니다. link 태그를 사용하여 bootstrap.min.css 파일을 로드합니다.

div 태그 안에 div를 사용하여 두 줄의 텍스트를 만듭니다. 두 div에 class 속성을 추가하고 class를 통해 스타일을 설정합니다. 그 중 test로 설정된 클래스가 있는 div는 숨겨지고 표시됩니다.

숨겨진 클래스 이름을 사용하면 하위 div 요소가 보이지 않게 되고, 표시 클래스 이름을 사용하면 클래스 테스트가 있는 div를 숨김에서 표시로 만들 수 있습니다.

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

로그인 후 복사

브라우저에서 test.html 파일을 열어서 효과를 확인해 보세요.

출력 결과:

부트스트랩에서 div를 숨기는 방법