bootStrap, classList

부트스트랩이라는 간편한 라이브러리가 있다

 

 

 요거

사용방법 같은 경우 안에 다 나와있고 처음 사용시 방법은

css 부르듯이 head 태그안에

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

 

body 태그 맨밑에

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

 

이러면 불러오기 성공

 

사용은 홈페이지 내부에 복사 붙여넣기로 가능하다

---

원래 안보이다가 보이는 메뉴창이나 알림창 같은 경우에

display 속성을 직접 none 이나 block으로 하는 방법도 있지만

display 속성을 none, block을 해놓은 클래스를 그 요소에 추가시키는 방법도 있다

 

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand">Navbar</span>
      <button class="navbar-toggler" type="button">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
</nav> 

<ul class="list-group" >
<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>

 

부트스트랩으로 불러온 ui들

이제 이 밑에 있는 리스트들을 오른쪽 상단 메뉴버튼을 누르면 보이게

기본상태에는 안보이게 만든다

 

css 부분은 기본값은 display 속성을 none, 또 show라는 클래스 자체는 그 요소를 보이게 해주는 block을 넣어놓는다

.list-group {
    display: none;
}

.show {
    display: block;
}

 

document.getElementsByClassName('navbar-toggler')[0].
    addEventListener('click', function() {
        document.getElementsByClassName('list-group')[0].classList.toggle('show');
    })

 

자 처음보는 classList 와 toggle

classList는 그 요소의 클래스에

toggle은 'show'라는 클래스가 있을 경우 삭제, 없을 경우 추가

딱 원하는 방향에 맞는 함수인거 같다

 

이제 버튼을 클릭시 기본값은 show라는 클래스가 없으니 추가가 되어

<ul class="list-group show">

 

이런식으로 변한다

우선순위로 show가 뒤에 있으니 block 속성값이 적용되어 보이게 된다

한번 더 누를시 show가 추가되었으니 show가 지워지며 안보여지게 된다

---

요소를 가져오는 방법 +

document.querySelector('.list-group');

 

쿼리셀렉터로 css 문법하고 똑같이 추가 시키면된다

클래스는 앞에 ' . ' 을 추가

id 같은 경우는 ' # ' 을 추가

 

쿼리셀렉터 같은 경우는 한가지만 가져오기 때문에

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

 

만약 이런 클래스가 여러개인 경우에서 중간에 있는 A fourth item 요소를 가져와야한다면

document.querySelectorAll('.list-group-item')[2];

쿼리셀렉터올로 똑같이 인덱스 값을 입력하여 가져와야한다