부트스트랩 4 탐색바

네비게이션 바

탐색 모음은 페이지 상단에 배치되는 탐색 헤더다.

기본 탐색바

Bootstrap을 사용하면 화면 크기에 따라 탐색 모음이 확장되거나 축소될 수 있다.

클래스 와 함께 표준 탐색 모음이 생성되고 그 뒤에 반응형 축소 .navbar 클래스가 생성된다.

.navbar-expand-xl|lg|md|sm (초대형, 대형, 중형 또는 소형 화면에서 탐색 모음을 수직으로 쌓는다.)

탐색 모음 내부에 링크를 추가하려면 class=”navbar-nav”가 있는 <ul> 요소를 사용하자.
그런 다음 .nav-item 클래스가 있는 <li> 요소를 추가한 다음 .nav-link 클래스가 있는 <a> 요소를 추가한다.

예제

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

수직 탐색 모음

수직 탐색 모음을 만들려면 .navbar-expand-xl|lg|md|sm 클래스를 제거하자.

예제

<!-- A vertical navbar -->
<nav class="navbar bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

중앙 Navbar

탐색 모음을 중앙에 배치하려면 .justify-content-center 클래스를 추가하자.

예제

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

컬러 Navbar

탐색 모음의 배경색을 변경하려면 .bg-color 클래스 중 하나를 사용하자 (.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark 및 .bg-light).

⭐ .navbar-dark 클래스가 포함된 탐색 모음의 모든 링크에 흰색 텍스트 색상을 추가하거나 .navbar-light 클래스를 사용하여 검정색 텍스트 색상을 추가하자.

예제

<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

브랜드 / 로고

.navbar-brand 클래스는 페이지의 브랜드/로고/프로젝트 이름을 강조하는 데 사용된다.

예제

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav>

탐색 모음 축소

작은 화면에서는 탐색 링크를 숨기고 클릭하면 표시되는 버튼으로 대체하려는 경우가 많다.

축소 가능한 탐색 모음을 만들려면 버튼을 사용하자.

예제

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

드롭다운이 있는 Navbar

Navbar에는 드롭다운 메뉴도 포함될 수 있다.

예제

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

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Navbar 양식 및 버튼

입력과 버튼을 나란히 그룹화하기 위해 <form> 요소에 class=”form-inline”을 추가한다.

예제 1

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

예제 2

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav>

탐색 가능한 텍스트

.navbar-text 클래스를 사용하여 링크가 아닌 navbar 내부의 모든 요소를 ​​수직으로 정렬한다.
적절한 패딩 및 텍스트 색상을 보장한다.

예제

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>

</nav>

고정 탐색 표시줄

탐색 표시줄을 페이지 상단이나 하단에 고정할 수도 있다.

고정 탐색 모음은 페이지 스크롤과 관계없이 고정된 위치(상단 또는 하단)에 계속 표시된다.

.fixed-top 클래스는 탐색 모음을 상단에 고정 시킨다.

페이지 하단에 navbar를 유지하려면 .fixed-bottom 클래스를 사용하자.

탐색 모음을 스크롤할 때 페이지 상단에 고정되도록 하려면 .sticky-top 클래스를 사용하자.
⭐ 이 클래스는 IE11 및 이전 버전에서는 작동하지 않는다. position: relative;로 처리된다.

예제 1

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

예제 2

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

예제 3

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>