반응형
1. head 태그 안에 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> 복붙 한다. (마지막에 적용할 css의 파일 링크를 아래쪽으로)
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>2. body 태그 가 끝나기 전에 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
을 복붙한다
<body>
<script>
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>3. UI이 적용할 html
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button" id="test">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group" id="test1">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</body>4. script
<script>
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
document.getElementsByClassName('list-group')[0].classList.toggle('show');
})
</script>or
<script>
document.querySelector('.navbar-toggler').addEventListener('click', function() {
document.querySelector('.list-group').classList.toggle('show');
})
</script>or
<script>
document.querySelector('#test').addEventListener('click', function() {
document.querySelector('#test1').classList.toggle('show');
})
</script>or
<script>
document.querySelectorAll('.navbar-toggler')[0].addEventListener('click', function() {
document.querySelectorAll('.list-group')[0].classList.toggle('show');
})
</script>5. 출력화면
반응형
'JavaScript > 실습' 카테고리의 다른 글
| [javascript] 369게임(문자검색 match, 배열요소결합 join, 배수 %, 내림 math.floor) (0) | 2023.01.21 |
|---|---|
| [javascript] input 이벤트 (0) | 2023.01.20 |
| [javascript] form 전송 및 막기, if 문 (0) | 2023.01.17 |
| [javascript] 제이쿼리(jquery) 자바스크립트 모달창 (0) | 2023.01.16 |
| [javascript] function의 파라미터, 이벤트리스너 (0) | 2023.01.07 |
댓글