Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 페이지 위치 경로(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개 항목으로 구성된 페이지 경로를 작성하고 있다.