8. 부트스트랩 내비게이션 과 탭 메뉴

부트스트랩 내비게이션

부트스트랩 내비게이션의 기본 구조는 아래와 같습니다.

<nav>
  <ul class="nav">
    <li class="nav-item"><a class="nav-link" href="#">menu1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">menu2</a></li>
  </ul>
</nav>

 

내비게이션 정렬

nav클래스 대상에 추가 클래스명으로

가운데정렬(justify-content-center) or 오른쪽정렬(justify-content-end) or 수직정렬(flex-column) 클래스를 적용합니다.

<nav>
  <ul class="nav justify-content-center">
    <li class="nav-item"><a class="nav-link" href="#">menu1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">menu2</a></li>
  </ul>
</nav>

<nav>
  <ul class="nav justify-content-end">
    <li class="nav-item"><a class="nav-link" href="#">menu1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">menu2</a></li>
  </ul>
</nav>

<nav>
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link" href="#">menu1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">menu2</a></li>
  </ul>
</nav>

 

 

---

 

부트스트랩 탭 메뉴

nav 클래스에 nav-tabs 클래스를 추가하고 리스트 중 active 클래스를 추가로 생성합니다.

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link  active" href="#">Link2</a>
    </li>
  </ul>

 

부트스트랩 탭 메뉴 디자인

nav-tabs 클래스를 nav-pills 클래스명으로 변경합니다. active 클래스 대상에 테두리가 아닌 면 색상이 채워집니다.

<ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link  active" href="#">Link2</a>
    </li>
  </ul>

 

부트스트랩 탭 메뉴 동일 너비 지정

일정한 너비값으로 각 탭의 크기를 설정합니다.

<ul class="nav nav-pills nav-justified">..</ul>

 

부트스트랩 탭 메뉴 클릭 시 탭 내용 출력

선택되는 탭 메뉴에는 data-toggle="tab" 속성을 적용하고 나타나야하는 탭 내용에는 각각 id를 지정합니다.

탭 내용의 아이디를 탭 메뉴에 href 속성과 함께 href="#아이디명"으로 작성하여 연결합니다.

탭 메뉴

<a class="nav-link" data-toggle="tab" href="#아이디명">Home</a>

탭 내용

처음 출력되는 대상에는 active 클래스명을 지정합니다.

<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container" id="menu1">...</div>
  <div class="tab-pane container" id="menu2">...</div>
</div>

탭 내용 부드럽게 나타나기

탭 제목 클릭 시 부드럽게 나타나게 하고 싶은 내용 대상에 fade 클래스를 적용합니다.

<div class="tab-pane container fade" id="">...</div>