Bootstrap 3.3.7 네비게이션과 컴포넌트

Bootstrap에는 네비게이션을 위한 GUI 구성 요소가 많이 포함되어 있다. 그 기본적인 사용법에 대해 여기에서 설명한다.
Tags:

목록 그룹(list-group)

이전에 버튼 그룹나 툴바 등의 GUI 컴포넌트에 대해 설명을 하였다. 그런데, Bootstrap에는 아직 GUI 컴포넌트가 포함되어 있다. 이번에는 그 중에서 많은 페이지를 정리하고 이동하는 “사이트 네이게이션에 관한 것"에 대해 설명 나가기로 하겠다.

우선 “목록 그룹"에 관한 것이다. 목록 그룹이라는 것은 “항목을 그룹화해하여 보기 쉽게 정리한 목록"이다. 아무튼, 보통의 목록처럼 생각하면 된다.

iPhone이나 Android 앱 등에는 목록 페이지를 이동하기 위한 인터페이스로 이용하고 있다. 목록 그룹도 단순히 어떤 목록을 표시하는 것보다는, 거기에서 선택한 항목으로 이동하기 위한 인터페이스로 사용하는 경우가 많은 것이다.

이 목록 그룹은 다음과 같은 형태로 작성된다.

<ul class="list-group">
    <li class="list-group-item">항목</li>
    ...... 중략 ......
</ul>

전체 목록인 <ul>는 class="list-group"을 지정하고, 거기에 표시되는 항목인 <li>에는 class="list-group-item"을 지정한다. 이 두 클래스의 지정만 잘 되어 있으면 목록 그룹을 볼 수 있다.

사실 클래스만 지정하면 꼭 <ul> 태그일 필요는 없다. 여기에서는 알기 쉽게 목록으로 예를 들어 놓았지만 이외에 다른 태그를 사용해도 전혀 문제 없다.

<div class="list-group">
    <a href="#" class="list-group-item">항목</a>
    ...... 중략 ......
</div>

예를 들어, 이렇게 하면 <a> 태그가 목록의 항목으로 되어 있는 목록 그룹이 생성된다.

이 밖에 표시에 관한 클래스도 일부 포함되어 있다. 아래에 간단하게 정리할 수 있다.

상태

클래스 설명
active 항목을 선택할 수 있는 상태로 한다.
disabled 항목을 선택할 수 없는 상태로 한다.

색상

클래스 색상 용도
list-group-item-success 밝은 녹색 뭔가 처리에 성공했을 때의 표시이다.
list-group-item-info 밝은 파란색 정보 표시를 위한 것이다.
list-group-item-warning 밝은 노랑색 경고 표시이다.
list-group-item-danger 밝은 빨강색 위험한 작업에 대한 것이다.

그럼 간단한 사용 예제는 아래와 같다.

<!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>컨텐츠 표시</h1>
            <h2>List Group</h2>
        </div>
         
        <ul class="list-group">
            <li class="list-group-item list-group-item-success"><a href="#">Success</a></li>
            <li class="list-group-item list-group-item-info">Info</li>
            <li class="list-group-item list-group-item-warning">Warning</li>
            <li class="list-group-item list-group-item-danger">Danger</li>
        </ul>
 
        <div class="list-group">
            <a href="#" class="list-group-item">One</a>
            <a href="#" class="list-group-item active">two</a>
            <a href="#" class="list-group-item disabled">Three</a>
            <a href="#" class="list-group-item">Four</a>
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에 2개의 목록 그룹을 표시하고 있다. <li>에 의한 것과 <div> 내에 <a> 태그를 마련한 것이다. 여러가지 스타일을 지정하고 있기 때문에, 어떻게 항목의 표시가 변하는지 확인하자.

페이지 위치 경로(breadcrumb)

탐색 계층 구조 페이지의 이동에는 흔히 빵가루라는 뜻의 “breadcrumb"라는 것이 많이 사용되고 있다. 탐색 진행에 연결되는 링크가 추가되는 타입의 네이게이션 인터페이스이다.

이도 Bootstrap으로 만들 수 있는데, breadcrumb는 단순히 <a> 태그로 링크를 정리해 놓은 것이고, 거기에 자체 클래스를 설정하여 보기 쉽게 정리를 할 수 있다.

<ul class="breadcrumb">
    <li> <a href="#">링크</a> </li>
    ...... 중략 ......
</ul>

breadcrumb는 <ul> 또는 <ol>에 의한 목록으로 만든다. <ul> 또는 <ol> 태그에 class="breadcrumb"와 같이 클래스를 지정한다. 각 링크는 <li> 태그 내에 준비한다. 이것으로 페이지 위치 경로 링크가 표시된다.

링크를 분리하는 구분자(separator)는 기본적으로 설정되어 있으며, 변경 등의 옵션은 준비되어 있지 않다. 또한 배경 등의 스타일도 특별히 전용은 아니며, 이런 종류의 네비게이션 관련의 컴포넌트 중에서는 가장 간단한 것이라고 해도 좋을 것이다.

그럼, 이것도 사용 예제를 보도록 하겠다.

<!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>컨텐츠 표시</h1>
            <h2>Breadcrumbs</h2>
        </div>
         
        <ol class="breadcrumb">
            <li ><a href="#">One</a></li>
            <li ><a href="#">Two</a></li>
            <li ><a href="#">Three</a></li>
            <li>Four</li>
        </ol>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서는 “One”, “Two”, “Three” 3개의 링크와 현재의 표시를 나타내는 ‘Four’의 4개 항목으로 구성된 페이지 경로를 작성하고 있다.

페이지네이션(pagination)

여러 페이지를 순서대로 표시해 나갈 때 페이지 번호를 늘어 놓은 링크 등을 준비해 두는 것이 많을 것이다. 이것이 “페이지네이션(Pagination)” 이다.

페이지네이션(Pagination)은 보통 <ul> 또는 <ol> 태그를 기반으로 만들고, 기본적으로는 <a> 태그를 늘어 놓은 것 뿐이다. <ul> 태그 요소에 .pagination을 추가하면 사각형 박스로 된 페이지네이션이 만들어 진다. 클래스를 설정하는 것만으로 디자인이 적용된다. 기본적인 형태는 다음과 같다.

<ul class="pagination">
    <li><a href="#">번호</a></li>
    ...생략...
</ul>

<ul> 또는 <ol> 태그에 class="pagination"와 같은 형태로 클래스를 설정해야 한다. 표시하는 링크는 <li> 태그 내에 <a> 태그로 제공한다. 이것으로 여러 링크를 가로 일렬로 늘어 놓은 페이지 표시 링크를 만들 수 있다.

활성화(active)와 비활성화(disabled)

실제 페이지네이션에는 이 밖에 “사용되지 않는 링크"나 “현재 보고 있는 페이지” 등을 표시하는데 다음과 같은 클래스도 같이 사용한다.

클래스 설명
active 이것은 현재 열려있는 페이지를 보여하는 것이다.
disabled 사용 불가 상태를 나타낸다. 예를 들어 1페이지를 표시할 때, 그보다 이전 페이지로 이동하는 Prev 링크는 disable로 될 것이다.

활성화된 페이지의 <li> 태그에 .active를 추가하면, 사각형의 배경이 파란색이 되고 글자색은 하얀색이 된다. 마우스 포인터는 화살표로 바뀐다.

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

비활성화된 페이지의 li 요소에 .disabled를 추가하면 글자색이 회색이 되고, 마우스를 올렸을 때 금지 이미지가 나오고 클릭이 되지 않는다.

<li class="disabled"><a href="#">5</a></li>

이것들을 이용한 예제는 아래와 같다.

<!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>컨텐츠 표시</h1>
            <h2>Pagenation</h2>
        </div>
 
        <h3>Page 1</h3>
        <p>이것은 1페이지의 내용입니다.</p>
         
        <ul class="pagination">
            <li class="disabled"><a href="#" aria-label="Previous">
                <span aria-hidden="true">«</span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li ><a href="#">2</a></li>
            <li ><a href="#">3</a></li>
            <li><a href="#" aria-label="Next">
                <span aria-hidden="true">»</span></a></li>
        </ul>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에 1페이지를 표시하고 있는 상태로 만들다. 페이지 번호 “1"이 active되어, 더 뒤로 링크는 disabled로 되어 있다.

가운데 정렬

가운데 정렬을 하고 싶다면 div 등으로 감싼 후 텍스트 정렬을 가운데로 한다.

<div style="text-align: center;">
  ...
</div>

크기

기본 크기보다 작게 만들고 싶다면 .pagination-sm을 추가한다.

<ul class="pagination pagination-sm">

기본 크기보다 크게 만들고 싶다면 .pagination-lg를 추가한다.

<ul class="pagination pagination-lg">

 

정렬 및 크기에 대한 예제는 아래와 같다.

<!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 | Pagination</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      h1 {
        font-size: 20px;
      }
      .jb-center {
        text-align: center;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Pagination - Default</h1>
          <ul class="pagination">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
          <h1>Pagination - Center</h1>
          <div class="jb-center">
            <ul class="pagination">
              <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li class="active"><a href="#">5</a></li>
              <li><a href="#">6</a></li>
              <li><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">10</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
            </ul>
          </div>
          <h1>Pagination - Small</h1>
          <ul class="pagination pagination-sm">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
          <h1>Pagination - Big</h1>
          <ul class="pagination pagination-lg">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

탭(nav-tabs)과 필(nav-pills)

여러 페이지를 전환하여 표시할 때에 “탭(tab)“이 많이 사용된다. 탭을 클릭하여 다른 페이지로 이동시키는 것이다. 또는, 탭을 클릭해서 콘텐츠만 전환하는 사용법도 있다.

이 “탭"는 <ul> 태그를 이용하여 만들 수 있다. 기본적인 형태를 정리하면 아래와 같다.

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">탭 이름1</a></li>
    <li role="presentation"><a href="#">탭 이름2</a></li>
    ...... 중략 ......
</ul>

탭는 class="nav"를 지정하여 생성되는 네비게이션 관련 콤포넌트 중에 하나이다. 여기에서는 nav에 추가적으로 “nav-tabs"라는 클래스를 지정한다. 이것으로 그 안에 있는 <li> 태그에 포함된 링크가 각각 탭의 형태로 표시될 수 있게 된다.

<li> 태그에는 role=“presentation"를 지정해야 한다. 또한 현재 선택되어 있는 탭에는 class="active"를 지정한다.

단지 이것만으로 간단히 전환하는 탭의 디자인이 가능하다.

이 전환 탭에는 다른 스타일도 준비되어 있다. 그것은 얄약이라는 뜻의 “필(pill)“라는 것으로, <ul> 태그를 다음과 같이 수정하면 된다.

<ul class="nav nav-pills">

이 nav-pills는 탭 대신에 선택한 링크만 반전 표시되는 인터페이스이다. 선택된 링크가 알약(약 캡슐)와 같기 때문에 이렇게 부른다.

 

기본적인 사용법은 탭도 필도 전혀 차이가 없다. 다만 <ul> 클래스를 nav-tabs으로 하거나, nav-pills으로 하는 차이만 있다. 모두 기본적으로 동일하며, 단지 표시되는 디자인이 다소 다를 뿐이다.

이것들을 사용한 예제는 아래와 같다.

<!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>컨텐츠 표시</h1>
            <h2>Navs</h2>
 
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Page 1</a></li>
                <li role="presentation"><a href="#">Page 2</a></li>
            </ul>
             
            <h3>Home Content</h3>
            <p>This is home page content.</p>
            <p>이것은 nav-tabs 표시입니다.</p>
 
        </div>
         
        <ul class="nav nav-pills">
            <li role="presentation" class="active"><a href="#">A</a></li>
            <li role="presentation"><a href="#">B</a></li>
            <li role="presentation"><a href="#">C</a></li>
        </ul>
         
        <h3>Nav-Pills</h3>
        <p>이것은 nav-pills 표시입니다.</p>
 
    </div>
</div>
     
</div>
 
</body>
</html>

나비게이션 바(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개의 네이게이션 바을 작성하고, 상단과 하단에 표시하고 있다.




최종 수정 : 2021-08-25