Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 탭(nav-tabs)과 필(nav-pills)

Tags:

여러 페이지를 전환하여 표시할 때에 “탭(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>