Bootstrap 기본 가이드

Bootstrap 플러그인

Bootstrap 크루즈 nawig레이션

화면 경로 표시(Breadcrumbs)는 웹사이트의 계층 정보를 기반으로 한 표시 방식입니다. 블로그를 예로 들어, 화면 경로 표시는 발행 날짜, 카테고리 또는 태그를 표시할 수 있습니다. 이들은 현재 페이지가 라우팅 계층 구조 내의 위치를 나타냅니다.

Bootstrap의 화면 경로 표시(Breadcrumbs)는 간단한 텍스트 링크로 구성된 것입니다. .breadcrumb class의 불순리 목록입니다. 구분자는 CSS(bootstrap.min.css)에서 아래에 보여지는 class로 자동으로 추가됩니다：

.breadcrumb　>　li　+　li:before　{
　　　　color: #CCCCCC;
　　　　content: ";/　";
　　　　padding: 0;　5픽셀;
}

아래 예제는 화면 경로 표시를 보여줍니다：

온라인 예제

예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　화면 경로 표시/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="breadcrumb">
	<li><a href="#">홈</a></li>
	<li><a href="#">2012</a></li>
	<li class="active">十二月</li>
</ul>
</body>
</html>

테스트를 해보세요 ‹/›

결과는 다음과 같습니다:

Bootstrap 페이지네이션 Bootstrap nawig레이션 바