네비게이션은 페이지 상단에 있는 탐색 헤더입니다.

네비게이션 기초

부트스트랩4를 사용하면 화면 크기에 따라 네비게이션을 확장하거나 축소할 수 있습니다.

표준 네비게이션은 .navbar클래스와 반응형 네비게이션 클래스를 조합하여 사용합니다.

.navbar-expand-xl|lg|md|sm

navbar내부에 링크를 추가하려면 <ul>요소에 .navbar-nav클래스를 사용합니다. 그런 다음 <li>요소에 .nav-item클래스, <a>요소에 .nav-link클래스를 추가합니다.

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-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>
  </ul>
</nav>

수직 네비게이션

수직으로 네비게이션을 배치하려면 .navbar-expand-xl | lg | md | sm 클래스를 제거하면 됩니다.

<nav class="navbar bg-light">
  <ul class="navbar-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>
  </ul>
</nav>

네비게이션 색설정

.navbar의 배경색을 변경하려면 .bg-color클래스를 사용합니다. (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark , .bg-light)

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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>
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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>
</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <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>
</nav>

** <li>요소에 .active클래스를 추가하여 활성상태를 표시할 수 있습니다. <a>요소에 .disabled클래스를 추가하여 비활성상태를 나타낼 수 있습니다.

브랜드 / 로고

.navbar-brand클래스는 페이지의 브랜드/로고를 강조 표시하는데 사용합니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">로고</a>
  
  <!-- Links -->
  <ul class="navbar-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>
  </ul>
</nav>

로고이미지에 .navbar-brand클래스를 적용하면 부트스트랩4가 이미지를 자동으로 네비게이션에 맞게 스타일을 지정합니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#"><img src="logo.png" alt="Logo" style="height:40px;"></a>
  
  <!-- Links -->
  <ul class="navbar-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>
  </ul>
</nav>

네비게이션 축소(Collapsing)

종종 작은 화면에서는 네비게이션 링크를 숨기고 버튼을 클릭하면 해당 링크를 표시해야 합니다.

축소할 수 있는 네비게이션을 만들려면 class="navbar-toggler", data-toggle="collapse"와 data-target="#thetarget"을 포함하는 버튼을 사용합니다. 그런 다음 class="collapse navbar-collapse"를 가지는 div요소안에 navbar컨텐츠를 추가합니다. 그리고 버튼의 data-target 속성값 "thetarget"과 일치하는 id를 추가합니다.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#"><img src="logo.png" alt="Logo" style="height:40px;"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-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>    
    </ul>
  </div>  
</nav>

** 여기에서 .navbar-expand-md클래스를 제거하면 navbar링크를 숨기고 toggle버튼을 표시할 수 있습니다.

드롭다운을 포함하는 네비게이션

네비게이션에 드롭다운 메뉴를 추가할 수 있습니다. (.dropdown-menu)

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">로고</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">회사소개</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">자료실</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        강좌
      </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</a>
      </div>
    </li>
  </ul>
</nav>

폼과 버튼을 포함하는 네비게이션

입력 및 버튼을 나란히 그룹화하려면 class="form-inline"클래스를 가지는 <form>요소를 추가합니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">검색</button>
  </form>
</nav>

** 입력필드 옆에 .input-group-prepend 또는 .input-group-append클래스를 추가하여 아이콘이나 도움말 텍스트를 첨부할 수 있습니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="이메일을 넣으세요">
    </div>    
  </form>
</nav>

네비게이션 Text

.navbar-text클래스를 사용하여 네비게이션에서 링크가 아닌 요소를 정렬합니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">회사소개</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
  </ul>
  <!-- Navbar text-->
  <span class="navbar-text">
    부트스트랩4강좌 추가합니다.
  </span>
</nav>

네비게이션 고정

네비게이션을 상단 또는 하단에 고정할 수도 있습니다.

네비게이션을 고정하면 화면 스크롤과 관계없이 고정된 위치(상단 또는 하단)에 표시됩니다.

.fixed-top클래스를 사용하면 네비게이션이 상단에 고정됩니다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">로고</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">회사소개</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
  </ul>
</nav>

** fixed-bottom클래스를 사용하면 페이지 하단에 고정됩니다.

Sticky 네비게이션 

** .sticky-top클래스를 사용하면 화면을 스크롤할 때 네비게이션이 페이지 상단에 고정됩니다. IE11이전에서는 작동하지 않습니다. (position:relative로 처리함)

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" href="#">로고</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">회사소개</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">강좌</a>
    </li>
  </ul>
</nav>