Nav 메뉴

간단한 수평메뉴를 만들려면 <ul>요소에 .nav클래스를 추가하고 <li>요소에 .nav-item을 추가합니다. 링크에는 .nav-link클래스를 추가하면 됩니다.

<ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

메뉴 정렬

메뉴를 중앙정렬하려면 .justify-content-center클래스를 추가합니다. 오른쪽 정렬을 하려면 .justity-content-end클래스를 사용합니다.

<ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>
  
<ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

 <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

수직 메뉴

수직 메뉴를 만들기 위해서 .flex-column클래스를 사용합니다.

<ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

탭메뉴(Tabs)

.nav-tabs클래스를 사용하면 탭메뉴를 만들 수 있습니다. 

현재 링크에는 .active클래스를 추가하여 활성화할 수 있습니다.

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

부드러운 메뉴(Pills)

.nav-pills클래스를 사용하여 모서리가 부드러운 메뉴를 만들 수 있습니다. 

<ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

메뉴 양쪽 맞춤(Justified Tabs/Pills)

.nav-justified 클래스를 추가하여 메뉴를 양쪽 맞춤할 수 있습니다.

<ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>  
  
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

Pills with Dropdown

.dropdown-menu와 연동하여 메뉴를 다양화할 수 있습니다.

<ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">회사소개</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">강좌</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">실전홈페이지제작</a>
        <a class="dropdown-item" href="#">CSS Grid강좌</a>
        <a class="dropdown-item" href="#">PHP5 & 그누보드5강좌</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

Tabs width Dropdown

<ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">회사소개</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">강좌</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">실전홈페이지제작</a>
        <a class="dropdown-item" href="#">CSS Grid강좌</a>
        <a class="dropdown-item" href="#">PHP5 & 그누보드5강좌</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">쇼핑몰</a>
    </li>
</ul>

토글/동적 탭메뉴

탭메뉴를 토글 가능하게 하려면 각 링크에 data-toggle="tab"속성을 추가합니다.

그 다음 모든 탭에 고유한 ID가 있는 .tab-pane클래스를 추가하고 이것을 .tab-content클래스를 갖는 <div>요소로 감쌉니다.

탭을 클릭할 때 탭을 페이드인 및 페이드아웃하려면 .tab패널에 .fade클래스를 추가합니다.

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">자료실</a>
    </li>
</ul>

  <!-- Tab panes -->
<div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>https://365ok.co.kr에서는 홈페이지제작을 원하는 사람들을 위한 많은 강좌가 있습니다.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>강좌</h3>
      <p>수백개의 유료/무료 웹프로그래밍 관련 동영상 강좌가 있습니다.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>자료실</h3>
      <p>웹에 종사하는 사람들에게 유익한 수 많은 소스/정보가 있습니다.</p>
    </div>
</div>

Toggleable / Dynamic Pills

탭메뉴에서 사용한 토글기능 및 동적 기능을 모서리가 부드러운 Pills메뉴에도 사용할 수 있습니다.

data-toggle="pill"로 변경하면 됩니다.

<ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">강좌</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">자료실</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>https://365ok.co.kr에서는 홈페이지제작을 원하는 사람들을 위한 많은 강좌가 있습니다.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>강좌</h3>
      <p>수백개의 유료/무료 웹프로그래밍 관련 동영상 강좌가 있습니다.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>자료실</h3>
      <p>웹에 종사하는 사람들에게 유익한 수 많은 소스/정보가 있습니다.</p>
    </div>
  </div>