Bootstrap4 기본 튜토리얼

Bootstrap4 사이드바 탐색(Breadcrumb)

사이드바 탐색은 사용자에게 웹사이트나 애플리케이션 내 현재 페이지의 위치를 안내하는 탐색 방법입니다. 사이드바 탐색은 많은 페이지나 복잡한 탐색 계층 구조를 가진 웹사이트의 접근성을 크게 향상시킬 수 있습니다.

사이드바 탐색은 웹사이트의 계층 정보를 기반으로 한 표시 방식입니다. 블로그를 예로 들어, 사이드바 탐색은 출판 날짜, 카테고리 또는 태그를 표시할 수 있습니다. 이들은 현재 페이지가 탐색 계층 구조 내의 위치를 나타내며, 사용자 인터페이스에서의 탐색 보조입니다.

Bootstrap의 사이드바 탐색은 간단한 .breadcrumb class의 불순서 목록. 구분자는 CSS(bootstrap.min.css)의 ::before와 content를 통해 추가됩니다. 다음과 같은 클래스가 자동으로 추가됩니다:

.breadcrumb-item　+　.breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: "#6c757d;
　　content: "/";
}

Bootstrap를 사용하여 정적 사이드바 레이아웃을 생성하려면 단순히 순차 목록에 .breadcrumb 클래스를 사용하면 됩니다. 다음과 같은 Bootstrap 예제와 같습니다:4 사이드바 탐색 예제

예제

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jQuery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Home</a></li>
　　<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Home</a></li>
　　<li class="breadcrumb-item"><a href="#">Library</a></li>
　　<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>

테스트를 보세요 ‹/›

리스트 형식을 사용하지 않아도 됩니다:

Bootstrap4 사이드바 탐색 예제

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jQuery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="breadcrumb">
　　<a　class="breadcrumb-item"　href="#">Home</a>
　　<a　class="breadcrumb-item"　href="#">Library</a>
　　<a　class="breadcrumb-item"　href="#">Data</a>
　　<span　class="breadcrumb-item　active">Bootstrap</span>
</nav>
</body>
</html>

테스트를 보세요 ‹/›

실행 후 결과는 다음과 같습니다:

Bootstrap4 양식 Bootstrap4 네비게이션 타이틀