Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 나비게이션 바(navbar)

이런 종류의 링크 이동을 위한 것으로, 가장 복잡한 인터페이스를 네이게이션 바일 것이다.

네이게이션 바(navigation bar)

네이게이션 바는 많은 응용 프로그램과 Web 사이트에서 사용되고 있다. 이것은 Bootstrap에는 <nav> 태그와 <div> , 그리고 <a> 태그를 조합해서 만든다.

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <a class="navbar-brand" href="#">링크 이름</a>
        ……중략……
    </div>
</nav>

이 네이게이션 바의 기본형이다. <nav> 태그를 기반으로 한다. 이것에는 class="navbar"라는 클래스와 네이게이션 바의 스타일을 지정하는 클래스를 제공한다. 기본은 “navbar-default"라는 클래스이다. 이 밖에 role="navigation"라는 속성을 준비한다.

이 안에는 class="container"를 지정한 <div> 태그를 준비한다. 그리고 이 안에 <a> 태그로 링크를 작성한다. 이것으로 간단히 툴바가 생성된다.

이 네이게이션 바에는 표시에 관한 클래스가 몇개 준비되어 있다. 중요한 것들을 정리하면 아래와 같다.

클래스 설명
navbar-fixed-top 이것을 넣으면 이 네이게이션 바가 브라우저 상단에 고정되어 표시된다.
navbar-fixed-bottom 이곳은 브라우저의 하단에 고정 표시됩니다.
navbar-inverse 이 반전표시이다. 검은색 글자에 흰색 바가 표시된다.

매우 흥미로운 것은 navbar-fixed-top과 navbar-fixed-bottom이다. 이들은 브라우저의 상단과 하단에 고정되지만, Web 페이지가 스크롤이 있는 긴 표시가 있어도, 항상 위아래로 고정되어 표시되도록 된다 (스크롤로 인해 없어지거나 하지 않는다).

그럼 아래에 이용 예를 들어 두었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
 
        <div class="page-header">
            <h1 style="margin:75px 0px 0px 0px;">컨텐츠 표시</h1>
            <h2>NavBar</h2>
        </div>

        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
 
         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
       <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
         
    </div>
</div>
     
</div>
 
</body>
</html>

2개의 네이게이션 바을 작성하고, 상단과 하단에 표시하고 있다.