부트스트랩에서 div를 숨기는 방법
- WBOY원래의
- 2022-05-07 15:57:172722검색
부트스트랩에서는 div의 클래스 이름을 사용하여 div 요소를 숨길 수 있습니다. 숨겨진 div를 표시하려면 표시 클래스 이름을 사용하세요. 클래스 ="hidden">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 파일을 열어서 효과를 확인해 보세요.
출력 결과:
요약:
1 link 태그를 사용하여 bootstrap.min.css 파일을 로드합니다.
2. div 태그 내에서 div를 사용하여 두 줄의 텍스트를 만듭니다.
3. 두 div에 클래스 속성을 추가하고 클래스를 통해 스타일을 설정합니다. 그 중 테스트할 클래스가 설정된 div는 숨겨지고 표시됩니다.
4. 하위 div 요소를 숨기려면 숨겨진 클래스 이름을 사용하고, 클래스 테스트가 포함된 div를 숨김에서 표시로 만들려면 표시 클래스 이름을 사용하세요.
5. 브라우저에서 test.html 파일을 열어서 효과를 확인하세요.
관련 권장 사항: 부트스트랩 튜토리얼
위 내용은 부트스트랩에서 div를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!