* 내비게이션 바는 .navbar-toggler와 .navbar-collapse, .navbar-expand-*
클래스를 사용하여 컨텐츠가 버튼 뒤에서 축소/확장되는 시기를 결정할 수 있는데,
여타 유틸리티들과 함께 조합하면 특정 요소를 표시하고 숨길 시기를 쉽게 선택할 수 있다!
1. 내비게이션 바의 토글러 아이콘은 기본적으로 내비게이션 바의 배경에 맞추어 정의되어 있으며(단, 내비게이션 바와 토글러 모두 사용자 지정에 의한 색상 변경도 가능하다!), 내비게이션 바의 렌더링 높이(기본값: ~ 54px)는 기본적으로 안의 내용 크기에 의해 제어된다:
➥
내비게이션바 토글 버튼은 기본적으로 왼쪽 정렬되지만,
<a> 요소와 같은 형제요소를 따라야 하는 경우엔 자동적으로 오른쪽으로 떨어져서 배치된다
- 곧, 위 예제는 토글러 <button>이 <a> 요소 뒤에 있어 축소 시 햄버거 아이콘이 우측으로 떨어져서 배치된다.
반면, 위 코드에서 토글러 버튼 앞 <a> 요소를 없앤 경우와
<a> 요소가 토글러 <button> 뒤로 가는 경우에는 햄버거 아이콘이 좌측으로 배치된다
←
참고로, .navbar-toggler navbar-toggler-left/right로 토글버튼의 배치 방향을 직접 지정해줄 수도 있다!
2. 내비게이션 바 내부에는 <ul>(및 <li>, <a>)만 아니라 인라인 폼 또한 넣을 수 있다: