부트스트랩 탐색 모음

탐색 모음

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

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

표준 탐색 모음은 로 생성됩니다 <nav class="navbar navbar-default">.

다음 예는 페이지 상단에 탐색 모음을 추가하는 방법을 보여줍니다.

예시

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>
...

참고: 이 페이지의 모든 예는 작은 화면에서 너무 많은 공간을 차지하는 탐색 모음을 보여줍니다(그러나 탐색 모음은 Bootstrap이 반응하기 때문에 큰 화면에서 한 줄에 표시됩니다). 이 문제(작은 화면)는 이 페이지의 마지막 예제에서 해결됩니다.

반전된 탐색 모음

기본 탐색 모음의 스타일이 마음에 들지 않는 경우 Bootstrap은 대체 검은색 탐색 모음을 제공합니다.

.navbar-default클래스를 .navbar-inverse다음 으로 변경하십시오 .

예시

드롭다운이 있는 탐색 모음

탐색 모음에는 드롭다운 메뉴도 포함될 수 있습니다.

다음 예는 "페이지 1" 버튼에 대한 드롭다운 메뉴를 추가합니다.

예시

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

오른쪽 맞춤 탐색 모음

.navbar-right클래스는 탐색 모음 버튼을 오른쪽 정렬하는 데 사용됩니다 .

다음 예에서는 탐색 모음의 오른쪽에 "가입" 버튼과 "로그인" 버튼을 삽입합니다. 또한 두 개의 새로운 버튼 각각에 글리프콘을 추가합니다.

예시

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
</div>
</nav>

탐색 모음 버튼

탐색 모음 내부에 버튼을 추가하려면 .navbar-btn부트스트랩 버튼에 클래스를 추가합니다.

예시

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>

Navbar 양식

탐색 모음 내부에 양식 요소를 추가하려면 양식 요소에 .navbar-form클래스를 추가하고 입력을 추가하십시오. .form-group입력을 담고 있는 div 컨테이너 에 클래스를 추가했음을 주목 하세요. 입력이 두 개 이상인 경우 적절한 패딩이 추가됩니다(이에 대해서는 양식 장에서 자세히 알아볼 것입니다).

예시

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
</nav>

.input-group및 .input-group-addon클래스를 사용하여 입력 필드 옆에 아이콘이나 도움말 텍스트를 첨부 할 수도 있습니다 . 부트스트랩 입력 장에서 이러한 클래스에 대해 자세히 알아볼 것입니다.

예시

Navbar 텍스트

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

예시

고정 탐색 모음

탐색 모음은 페이지 상단 또는 하단에 고정될 수도 있습니다.

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

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

예시

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

클래스 는 .navbar-fixed-bottom탐색 모음을 맨 아래에 유지합니다.

예시

<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

탐색 모음 축소

탐색 모음은 종종 작은 화면에서 너무 많은 공간을 차지합니다.

탐색 모음을 숨겨야 합니다. 그리고 필요할 때만 보여주세요.

다음 예에서 탐색 모음은 오른쪽 상단 모서리에 있는 버튼으로 대체됩니다. 버튼을 클릭할 때만 탐색 모음이 표시됩니다.

예시

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
</div>
</nav>

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조