[basic] BS3 - Navbar (BS메뉴바 = BS네브바) ★ - 네비게이션 메뉴바

 

[Navbars]

.navbar (네비게이션 바 생성)

.navbar-brand (네비게이션 바 안의 로고나 헤더 표시)

.navbar-btn (네비게이션 바 안의 버튼 수직 정렬)

.navbar-collapse (작은 기기에서 네비게이션 바 감추기)

.navbar-default (기본 네비게이션 바 생성) - 옅은 회색 메뉴바

.navbar-fixed-bottom (화면 하단에 네비게이션 바 고정)

.navbar-fixed-top (화면 상단에 네비게이션 바 고정)

.navbar-form (네비게이션 바 안에서 폼 요소 수직 정렬)

.navbar-header (네비게이션 바 안의 로고나 헤더 감싸는 요소)

.navbar-inverse (검은색 네비게이션 바 생성)

.navbar-left (네비게이션 바 안의 링크, 폼, 버튼, 텍스트를 왼쪽에 정렬)

.navbar-link (네비게이션 바 안의 요소를 링크처럼 보이게 하기)

.navbar-nav (네비게이션 바 안의 링크 메뉴 항목을 감싸는 <ul> 태그에 사용)</ul>

.navbar-right (네비게이션 바 안의 링크, 폼, 버튼, 텍스트를 오른쪽에 정렬)

.navbar-static-top (네비게이션 바의 좌측, 상단, 우측 경계선을 제거)

.navbar-text (네비게이션 바 안의 링크 아닌 요소의 수직 정렬)

.navbar-toggle (작은 화면에서 네비게이션 바 여는 토글 버튼 스타일)

 

 

.icon-bar (네비게이션 바 안의 햄버거 버튼 만드는 가로 막대)

 

navbar 연회색바

 

<nav class="navbar navbar-default">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">홈짱닷컴</a>

        </div>

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">JS</a></li>

        </ul>

    </div>

</nav>

 

예제보기

navbar 검은색바

 

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">홈짱닷컴</a>

        </div>

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#">HTML</a></li>

            <li><a href="#">CSS</a></li>

            <li><a href="#">JS</a></li>

        </ul>

    </div>

</nav>

 

예제보기

Navbar + Dropdown (드롭다운)

 

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">홈짱닷컴</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 Align (우측정렬)

 

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</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> 회원가입</a></li>

      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>

    </ul>

  </div>

</nav>

 

Navbar + Button (버튼)

 

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <div class="navbar-header">

            <a class="navbar-brand" href="#">홈짱닷컴</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 + Form (폼양식) : 검색창

글자 검색버튼

 

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</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>

 

---

아이콘 검색버튼

 

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</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="input-group">

        <input type="text" class="form-control" placeholder="Search" name="search">

        <div class="input-group-btn">

          <button class="btn btn-default" type="submit">

            <i class="glyphicon glyphicon-search"></i>

          </button>

        </div>

      </div>

    </form>

  </div>

</nav>

 

Navbar + Text (글자)

 

<nav class="navbar navbar-inverse">

    <ul class="nav navbar-nav">

        <li><a href="#">HTML</a></li>

        <li><a href="#">CSS</a></li>

    </ul>

    <p class="navbar-text">홈짱닷컴</p>

</nav>

 

Navbar Fix (상단고정바 + 하단고정바)

상단고정

<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</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 navbar-fixed-bottom">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#">홈짱닷컴</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 Collapse (메뉴접기 = 모바일메뉴)

 

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#hz">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">홈짱닷컴</a>

    </div>

    <div class="collapse navbar-collapse" id="hz">

      <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> 회원가입</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 로그인</a></li>

      </ul>

    </div>

  </div>

</nav>

예제보기