Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 탭(nav-tabs)과 필(nav-pills)
nav-tabs 클래스
여러 페이지를 전환하여 표시할 때에 “탭(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"
를 지정한다.
단지 이것만으로 간단히 전환하는 탭의 디자인이 가능하다.
nav-pills 클래스
이 전환 탭에는 다른 스타일도 준비되어 있다. 그것은 얄약이라는 뜻의 “필(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>