내비게이션 바와 그 컨텐츠는 기본적으로 유동적이어서, 컨테이너를 변경함으로써 다양하게 너비를 제한할 수 있고, 나아가 내비게이션 바 내에서의 간격과 정렬을 제어하기 위하여 부트스트랩의 간격 및 플렉스박스 유틸리티를 사용할 수 있다!
☞
내비게이션 바에 .navbar-expand로 주면; 항상 펼쳐진 채로 있게되고,
.navbar-expand-*는 해당 브레이크포인트에서부터 펼쳐지는 반응형 내비게이션 바로 동작한다.
한편, 항상 축소되는(= 토글 버튼만 보여지는) 내비게이션 바(= 항시 수직으로만 쌓는 적층구조)는
그저, .navbar-expand 클래스를 제거해주는 것으로 충분하다!
←
화면 너비를 줄여 축소 버튼을 확인하세요..
1.
메뉴바 중 나타났다 사라졌다 할 부분은 .navbar-collapse(내비게이션 바)와
.collapse(내비게이션 바에 적용할 스타일)로 스타일을 적용하며,
그 안에 부트스트랩의 .navbar-nav(내비게이션 바의 메뉴 영역) 스타일을 적용한 <div> 블록에
메뉴로 사용할 각각의 <a> 요소(.nav-link)를 넣어주면 된다
☞
위 코드의 축소 버튼(<button class="navbar-toggler">)에서의
data-bs-target= "#대상요소" 속성은 메뉴바 중 나타났다 사라졌다 할
<div> 요소(id= "대상요소")와 연결된다
한편, .nav-link에 .active 클래스를 추가하여 현재 페이지임을 나타내는데,
aria-current 속성도 추가해주어야 한다!