3-01 : Navigation Bar

단 하나의 맥락

: 공통 단인 layout에서 navigation-bar 사용

 

---

 

Semiflow Bundle

: layout.html에 버튼 구현 

: Bootstrap.min.js 사용하여 클릭 후 반응형 기능 구현

: <nav th:replace="navbar :: navbarFragment"></nav> 로 fragment 분리

 

---

자각

 

버튼 구현을 위해

> layout.html에

- <nav class="navbar-expand-lg  navbar-light  bg-light  border-bottom"></nav> 내부 <div class="container-fluid"></div>로 네비게이션 포맷을 잡고

 

- <a class="navbar-brand" href="/">SBB</a>

 

- <button class="navbar-toggler"  type="button"  data-bs-toggle="collapse"  data-bs-target="#navbarSupportedContent"

aria-controls="navbarSupportedContent"  aira-expanded="false"  aira-label="Toggle navigation"></button>

- 내부에 <span class="navbar-toggler-icon"></span>

 

- <div class="collapse navbar-collapse"  id="navbarSupportedContent"></div> 내부에

- <ul class="navbar-nav  me-auto  mb-2  mb-lg-0"></ul> 내부에

- <li class="nav-item"></li> 내부에

- <a class="nav-link" href="#">로그인</a>

 

 

-

 

자바스크립트를 인식하게 하기 위해

- bootstrap.min.js > static에 넣는다

- <script th:src="@{/bootstrap.min.js"></script>를 헤드단에 넣는다

 

 

-

 

 

외부 템플릿 fragment로 사용하기 위해

> navbar 새로 작성

- 기존 최상단 틀에

- th:fragment="navbarFragment" 만 간단히 추가

 

> layout.html 바디 최상단 원래 자리에

- <nav th:replace="navbar :: navbarFragemnt"></nav> 로 변형