메시지를 필요에 따라 표시하려면, "알림(alert)" 및 "다이아로그(dialog)"라고 것이 사용된다. Bootstrap에는 그러한 "필요에 따라 표시"하는 콤포넌트가 많이 포함되어 있다. 그 방법을 함께 살펴 보겠다.


경고(alert)

경고는 어디까지나 콘텐츠에 메시지로 삽입되는 것이 었습니다. 이 화면 위에 다른 창으로 뭔가를 표시 할 수 있습니다. 이러한 경우에 사용되는 것이 "대화 상자" 즉, "다이어로그"이다.

모달 다이어로그

다이어로그는 조금 복잡한 태그 구조이다. 경고(alert)와 동일하게, 사전에 표시하는 다이어로그 내용을 HTML 태그로 작성해서 준비두고, 이것을 버튼 클릭 등으로 표시하는 방식이다. 우선은 다이어로그의 태그 구조를 정리하면 아래와 같다.

<div class="modal fade" id="다이어로그 아이디" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ……헤더 표시……
            </div>
            <div class="modal-body">
                ……바디 표시……
            </div>
            <div class="modal-footer">
                ……풋터 표시……
            </div>
        </div>
    </div>
</div>

매우 복잡하고 이해하기 어려울 수 있다. 좀 더 알기 쉽게 정리하자면, 아래와 같은 구조로 되어있는 것을 알 수 있다.

대화 전체

<div class="modal-dialog">

컨텐츠 부분

<div class="modal-content">

헤더, 바디, 풋터

<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">

다이어로그는 class="modal-dialog"를 지정한 <div> 태그로 만든다. 그 안에 내용을 보면 class="modal-content"태그를 제공하고, 더불어 그 안에 헤더, 바디 및 풋터 태그를 준비하여 내용을 작성한다. 이 구성이 다이어로그의 기본형으로 생각할 수 있다.

다이어로그 열기(open) 및 닫기(close)

다이어로그는 단지 표시 태그를 준비한 것만으로는 사용할 수 없다. 다이어로그를 호출하여 표시하거나 닫을 수 있는 구조도 준비해야 한다.

다이어로그 열기

다이어로그를 열려면 <a> 태그를 이용한다. 이것은 아래와 같은 형태가 된다.

<a href="다이어로그의 지정" data-toggle="modal"> ...... </a>

href에서 여는 다이어로그 <div> 태그를 지정한다. 이는 ID를 사용하여 지정하면 된다. 태그에는 data-toggle="modal"라는 속성을 지정한다. 그러면 href에 지정된 ID의 다이어로그가 표시되게 된다.

다이어로그 닫기

대화를 닫으려면 이것도 <a> 태그를 사용한다. 이는 다이어로그의 태그(일반적으로 풋터 태그)에 제공한다.

<a href="#" data-dismiss="modal"> ...... </a>

속성으로 data-dismiss = "modal"을 사용할 수 있어야합니다. 그러면 자동으로 대화 상자를 닫을 수 있습니다.

그럼 실제로 간단한 대화를 호출 예제를 보도록 하자.

<!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 >다이어로그</h2>
        </div>
         
        <a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>
             
        <div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
 
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                         <h4 class="modal-title" id="dlogLabel">
                            Dialog!
                        </h4>
                    </div>
                    <div class="modal-body">
                        이것은 다이어로그의 메세지입니다.
                    </div>
                    <div class="modal-footer">
                        <a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a> 
                    </div>
                </div>
                 
            </div>
             
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서 "Show Dialog"버튼을 클릭하면 다이어로그가 나타난다. 다이어로그의 "Close"버튼을 클릭하면 다이어로그가 닫힌다.



모달 다이어로그(modal-dialog)

경고는 어디까지나 콘텐츠에 메시지로 삽입되는 것이 었습니다. 이 화면 위에 다른 창으로 뭔가를 표시 할 수 있습니다. 이러한 경우에 사용되는 것이 "대화 상자" 즉, "다이어로그"이다.

모달 다이어로드

다이어로그는 조금 복잡한 태그 구조이다. 경고(alert)와 동일하게, 사전에 표시하는 다이어로그 내용을 HTML 태그로 작성해서 준비두고, 이것을 버튼 클릭 등으로 표시하는 방식이다. 우선은 다이어로그의 태그 구조를 정리하면 아래와 같다.

<div class="modal fade" id="다이어로그 아이디" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ……헤더 표시……
            </div>
            <div class="modal-body">
                ……바디 표시……
            </div>
            <div class="modal-footer">
                ……풋터 표시……
            </div>
        </div>
    </div>
</div>

매우 복잡하고 이해하기 어려울 수 있다. 좀 더 알기 쉽게 정리하자면, 아래와 같은 구조로 되어있는 것을 알 수 있다.

대화 전체

<div class="modal-dialog">

컨텐츠 부분

<div class="modal-content">

헤더, 바디, 풋터

<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">

다이어로그는 class="modal-dialog"를 지정한 <div> 태그로 만든다. 그 안에 내용을 보면 class="modal-content"태그를 제공하고, 더불어 그 안에 헤더, 바디 및 풋터 태그를 준비하여 내용을 작성한다. 이 구성이 다이어로그의 기본형으로 생각할 수 있다.

다이어로그 열기(open) 및 닫기(close)

다이어로그는 단지 표시 태그를 준비한 것만으로는 사용할 수 없다. 다이어로그를 호출하여 표시하거나 닫을 수 있는 구조도 준비해야 한다.

다이어로그 열기

다이어로그를 열려면 <a> 태그를 이용한다. 이것은 아래와 같은 형태가 된다.

<a href="다이어로그의 지정" data-toggle="modal"> ...... </a>

href에서 여는 다이어로그 <div> 태그를 지정한다. 이는 ID를 사용하여 지정하면 된다. 태그에는 data-toggle="modal"라는 속성을 지정한다. 그러면 href에 지정된 ID의 다이어로그가 표시되게 된다.

다이어로그 닫기

대화를 닫으려면 이것도 <a> 태그를 사용한다. 이는 다이어로그의 태그(일반적으로 풋터 태그)에 제공한다.

<a href="#" data-dismiss="modal"> ...... </a>

속성으로 data-dismiss = "modal"을 사용할 수 있어야합니다. 그러면 자동으로 대화 상자를 닫을 수 있습니다.

그럼 실제로 간단한 대화를 호출 예제를 보도록 하자.

<!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 >다이어로그</h2>
        </div>
         
        <a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>
             
        <div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
 
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                         <h4 class="modal-title" id="dlogLabel">
                            Dialog!
                        </h4>
                    </div>
                    <div class="modal-body">
                        이것은 다이어로그의 메세지입니다.
                    </div>
                    <div class="modal-footer">
                        <a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a> 
                    </div>
                </div>
                 
            </div>
             
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서 "Show Dialog"버튼을 클릭하면 다이어로그가 나타난다. 다이어로그의 "Close"버튼을 클릭하면 다이어로그가 닫힌다.


접기(collapse)

경고는 필요에 따라 확 나타나고 닫겨 사라진다. 그런데, 필요에 따라 표시하거나 지우거나 할 수 있는 인터페이스로는 다른 것이 사용된다.

접기 표시(Collapse)

그것이 "접기 표시(Collapse)"라는 것입니다. 이것은 다음과 같은 형태로 작성된다.

<div class="collapse">
    ...... 표시 내용 ......
</ div>

이처럼 class="colapse"를 지정한 <div> 태그를 준비해두면, 접기 표시를 할수 있는 태그로 만들 수 있다. 이 태그의 표시를 접기하거나 확장하려면 이를 위한 <a> 태그를 준비해 둔다.

<a data-toggle="collapse" href="접어서 작게 하는 항목 지정"> ...... </a>

href에는 class="collapse"를 지정한 태그를 ID 등으로 지정한다. 이것으로 링크를 클릭할 때마다 접기 표시 태그를 표시하거나 숨기거나 한다.

아래에 사용 예를 들어 두었다.

<!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 >Collapse</h2>
        </div>
         
        <div>
            <a role="button" class="btn btn-default" data-toggle="collapse" href="#panel">Show Collapse</a>
        </div>
        <div> </div>
        <div id="panel" class="collapse">
            <div class="panel panel-default">
                <div class="panel-body">
                    표시하는 패널이다.
                </div>
            </div>
        </div>
             
    </div>
</div>
     
</div>
 
</body>
</html>

버튼을 클릭하면 메시지가 표시되었다가 사라지거나 한다. 간단히 접기 표시를 만들 수 있는 구성 요소로 기억두도록 하자.



Bootstrap에는 네비게이션을 위한 GUI 구성 요소가 많이 포함되어 있다. 그 기본적인 사용법에 대해 여기에서 설명한다.


목록 그룹(list-group)

이전에 버튼 그룹나 툴바 등의 GUI 컴포넌트에 대해 설명을 하였다. 그런데, Bootstrap에는 아직 GUI 컴포넌트가 포함되어 있다. 이번에는 그 중에서 많은 페이지를 정리하고 이동하는 "사이트 네이게이션에 관한 것"에 대해 설명 나가기로 하겠다.

목록 그룹 (list-group)

우선 "목록 그룹"에 관한 것이다. 목록 그룹이라는 것은 "항목을 그룹화해하여 보기 쉽게 정리한 목록"이다. 아무튼, 보통의 목록처럼 생각하면 된다.

iPhone이나 Android 앱 등에는 목록 페이지를 이동하기 위한 인터페이스로 이용하고 있다. 목록 그룹도 단순히 어떤 목록을 표시하는 것보다는, 거기에서 선택한 항목으로 이동하기 위한 인터페이스로 사용하는 경우가 많은 것이다.

이 목록 그룹은 다음과 같은 형태로 작성된다.

<ul class="list-group">
    <li class="list-group-item">항목</li>
    ...... 중략 ......
</ ul>

전체 목록인 <ul>는 class="list-group"을 지정하고, 거기에 표시되는 항목인 <li>에는 class="list-group-item"을 지정한다. 이 두 클래스의 지정만 잘 되어 있으면 목록 그룹을 볼 수 있다.

사실 클래스만 지정하면 꼭 <ul> 태그일 필요는 없다. 여기에서는 알기 쉽게 목록으로 예를 들어 놓았지만 이외에 다른 태그를 사용해도 전혀 문제 없다.

<div class="list-group">
    <a href="#" class="list-group-item">항목</a>
    ...... 중략 ......
</ div>

예를 들어, 이렇게 하면 <a> 태그가 목록의 항목으로 되어 있는 목록 그룹이 생성된다.

이 밖에 표시에 관한 클래스도 일부 포함되어 있다. 아래에 간단하게 정리할 수 있다.

상태

클래스설명
active항목을 선택할 수 있는 상태로 한다.
disabled항목을 선택할 수 없는 상태로 한다.

색상

클래스색상용도
list-group-item-success밝은 녹색뭔가 처리에 성공했을 때의 표시이다.
list-group-item-info밝은 파란색정보 표시를 위한 것이다.
list-group-item-warning밝은 노랑색경고 표시이다.
list-group-item-danger밝은 빨강색위험한 작업에 대한 것이다.

그럼 간단한 사용 예제는 아래와 같다.

<!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>List Group</h2>
        </div>
         
        <ul class="list-group">
            <li class="list-group-item list-group-item-success"><a href="#">Success</a></li>
            <li class="list-group-item list-group-item-info">Info</li>
            <li class="list-group-item list-group-item-warning">Warning</li>
            <li class="list-group-item list-group-item-danger">Danger</li>
        </ul>
 
        <div class="list-group">
            <a href="#" class="list-group-item">One</a>
            <a href="#" class="list-group-item active">two</a>
            <a href="#" class="list-group-item disabled">Three</a>
            <a href="#" class="list-group-item">Four</a>
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에 2개의 목록 그룹을 표시하고 있다. <li>에 의한 것과 <div> 내에 <a> 태그를 마련한 것이다. 여러가지 스타일을 지정하고 있기 때문에, 어떻게 항목의 표시가 변하는지 확인하자.



페이지 위치 경로(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개 항목으로 구성된 페이지 경로를 작성하고 있다.



페이지네이션(pagination)

여러 페이지를 순서대로 표시해 나갈 때 페이지 번호를 늘어 놓은 링크 등을 준비해 두는 것이 많을 것이다. 이것이 "페이지네이션(Pagination)" 이다.

Pagination

페이지네이션(Pagination)은 보통 <ul> 또는 <ol> 태그를 기반으로 만들고, 기본적으로는 <a> 태그를 늘어 놓은 것 뿐이다. <ul> 태그 요소에 .pagination을 추가하면 사각형 박스로 된 페이지네이션이 만들어 진다. 클래스를 설정하는 것만으로 디자인이 적용된다. 기본적인 형태는 다음과 같다.

<ul class="pagination">
    <li><a href="#">번호</a></li>
    ……생략……
</ul>

<ul> 또는 <ol> 태그에 class="pagination"와 같은 형태로 클래스를 설정해야 한다. 표시하는 링크는 <li> 태그 내에 <a> 태그로 제공한다. 이것으로 여러 링크를 가로 일렬로 늘어 놓은 페이지 표시 링크를 만들 수 있다.

활성화(active)와 비활성화(disabled)

실제 페이지네이션에는 이 밖에 "사용되지 않는 링크"나 "현재 보고 있는 페이지" 등을 표시하는데 다음과 같은 클래스도 같이 사용한다.

클래스설명
active이것은 현재 열려있는 페이지를 보여하는 것이다.
disabled사용 불가 상태를 나타낸다. 예를 들어 1페이지를 표시할 때, 그보다 이전 페이지로 이동하는 Prev 링크는 disable로 될 것이다.

활성화된 페이지의 <li> 태그에 .active를 추가하면, 사각형의 배경이 파란색이 되고 글자색은 하얀색이 된다. 마우스 포인터는 화살표로 바뀐다.

<li class="active"><a href="#">5</a></li>

비활성화된 페이지의 li 요소에 .disabled를 추가하면 글자색이 회색이 되고, 마우스를 올렸을 때 금지 이미지가 나오고 클릭이 되지 않는다.

<li class="disabled"><a href="#">5</a></li>

이것들을 이용한 예제를을 아래에 올려 두었다.

<!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>Pagenation</h2>
        </div>
 
        <h3>Page 1</h3>
        <p>이것은 1페이지의 내용입니다.</p>
         
        <ul class="pagination">
            <li class="disabled"><a href="#" aria-label="Previous">
                <span aria-hidden="true">«</span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li ><a href="#">2</a></li>
            <li ><a href="#">3</a></li>
            <li><a href="#" aria-label="Next">
                <span aria-hidden="true">»</span></a></li>
        </ul>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에 1페이지를 표시하고 있는 상태로 만들다. 페이지 번호 "1"이 active되어, 더 뒤로 링크는 disabled로 되어 있다.

가운데 정렬

가운데 정렬을 하고 싶다면 div 등으로 감싼 후 텍스트 정렬을 가운데로 한다.

<div style="text-align: center;">
  ...
</div>

크기

기본 크기보다 작게 만들고 싶다면 .pagination-sm을 추가한다.

<ul class="pagination pagination-sm">

기본 크기보다 크게 만들고 싶다면 .pagination-lg를 추가한다.

<ul class="pagination pagination-lg">

 

정렬 및 크기에 대한 예제는 아래와 같다.

<!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 | Pagination</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
      h1 {
        font-size: 20px;
      }
      .jb-center {
        text-align: center;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Pagination - Default</h1>
          <ul class="pagination">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
          <h1>Pagination - Center</h1>
          <div class="jb-center">
            <ul class="pagination">
              <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li class="active"><a href="#">5</a></li>
              <li><a href="#">6</a></li>
              <li><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">10</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
            </ul>
          </div>
          <h1>Pagination - Small</h1>
          <ul class="pagination pagination-sm">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
          <h1>Pagination - Big</h1>
          <ul class="pagination pagination-lg">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>



탭(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>


나비게이션 바(navbar)

이런 종류의 링크 이동을 위한 것으로, 가장 복잡한 인터페이스를 네이게이션 바일 것이다.

네이게이션 바(navigation bar)

네이게이션 바는 많은 응용 프로그램과 Web 사이트에서 사용되고 있다. 이것은 Bootstrap에는 <nav> 태그와 <div> , 그리고 <a> 태그를 조합해서 만든다.

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <a class="navbar-brand" href="#">링크 이름</a>
        ……중략……
    </div>
</nav>

이 네이게이션 바의 기본형이다. <nav> 태그를 기반으로 한다. 이것에는 class="navbar"라는 클래스와 네이게이션 바의 스타일을 지정하는 클래스를 제공한다. 기본은 "navbar-default"라는 클래스이다. 이 밖에 role="navigation"라는 속성을 준비한다.

이 안에는 class="container"를 지정한 <div> 태그를 준비한다. 그리고 이 안에 <a> 태그로 링크를 작성한다. 이것으로 간단히 툴바가 생성된다.

이 네이게이션 바에는 표시에 관한 클래스가 몇개 준비되어 있다. 중요한 것들을 정리하면 아래와 같다.

클래스설명
navbar-fixed-top이것을 넣으면 이 네이게이션 바가 브라우저 상단에 고정되어 표시된다.
navbar-fixed-bottom이곳은 브라우저의 하단에 고정 표시됩니다.
navbar-inverse이 반전표시이다. 검은색 글자에 흰색 바가 표시된다.

매우 흥미로운 것은 navbar-fixed-top과 navbar-fixed-bottom이다. 이들은 브라우저의 상단과 하단에 고정되지만, Web 페이지가 스크롤이 있는 긴 표시가 있어도, 항상 위아래로 고정되어 표시되도록 된다 (스크롤로 인해 없어지거나 하지 않는다).

그럼 아래에 이용 예를 들어 두었다.

<!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 style="margin:75px 0px 0px 0px;">컨텐츠 표시</h1>
            <h2>NavBar</h2>
        </div>

        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
        <p>this is content.</p>
 
         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
       <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">One</a>
                <a class="navbar-brand" href="#">Two</a>
                <a class="navbar-brand" href="#">Three</a>
            </div>
        </nav>
         
    </div>
</div>
     
</div>
 
</body>
</html>

2개의 네이게이션 바을 작성하고, 상단과 하단에 표시하고 있다.



HTML의 입력폼 컨트롤 이외에도 Bootstrap은 편리한 GUI 구성 요소가 포함되어 있다. 그 사용법을 설명한다.


버튼 그룹(btn-group)

HTML에는 입력 관계의 부품은 정해져 있다. 하지만 그것만으로는 그냥 재미없는 인터페이스가 되어 버린다. 좀 더 사용하기 쉽게 디자인된 부품이 있으면 ...... 이라고 생각하는 사람도 많을 것이다.

Bootstrap은 독자적으로 정의한 스타일이나 스크립트 등을 사용하여, 표준 HTML에 포함되어 있지 않은 인터페이스를 간단히 만들 수 있다. 그들에 대해 여기서 정리하여 설명하겠다.

버튼 그룹

우선은 "버튼 그룹"에 대해서이다. 버튼은 이미 간단히 설명을 했다. Bootstrap 자체의 클래스를 사용하는 것으로 보기 쉬운 디자인을 할 수 있었다. 이 푸시 버튼을 여러개를 나란히 그룹화한 것이 버튼 그룹이다.

이 버튼 그룹은 앞서 설명한 "입력 그룹"의 버튼 버전이라고 해도 좋을 것이다. 여러 버튼을 1개의 바(bar)처럼 표시한다. 이 버튼 그룹은 다음과 같이 작성한다.

<div class="btn-group">
    <button class="btn">버튼의 표시 텍스트</button>
    ...... 중략 ......
</ div>

class="btn-group"을 설정한 <div> 태그 안에 버튼을 작성하고 있다. 여기에서는 <button> 태그를 사용했지만, 이것은 <input type="button">에서도 동일하게 사용할 수 있다.

표시하는 것은 단순한 버튼이기 때문에, Bootstrap에 준비되어 있는 btn와 btn-primary 같은 버튼의 클래스도 그대로 사용할 수 있다.

 

아래는 실제 사용 예제이다.

<!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>Button Group</h2>
        </div>
         
        <div class="btn-group">
            <button class="btn">btn</button>
            <button class="btn btn-default">default</button>
            <button class="btn btn-primary">primary</button>
            <button class="btn btn-success">success</button>
            <button class="btn btn-info">info</button>
            <button class="btn btn-warning">warning</button>
            <button class="btn btn-danger">danger</button>
        </div>
    </div>
</div>
     
</div>
 
</body>
</html>

다양한 클래스를 설정한 버튼을 <div class="btn-group">으로 깨끗하게 1개의 그룹으로 구성되어 있다.



버튼 툴바(btn-toolbar)

버튼 그룹은 여러 버튼을 하나로 통합한 것이었다. 이 버튼 그룹은 더 나아가 여러 그룹을 한곳에 모아서 다루는 "버튼 툴바"라는 것으로 사용할 수 있다.

버튼 툴바

버튼 툴바는 툴바를 만드는 것이다. 툴바라는 것은 컴퓨터의 일반적인 비즈니스 소프트웨어에서 자주 사용되는 인터페이스이다. 메뉴 바의 아래에 아이콘을 표시하는 작은 버튼이 가로로 일렬로 늘어서 있다.

이러한 도구 모음은 단추가 길게 전부 연결되어 있는 것은 아니다. 관련있는 것이 몇 가지 그룹으로 되어 있고, 가로로 늘어선 형태로 되어 있다. 버튼 툴바는 이러한 도구 모음 버튼으로 만드는데 사용한다.

버튼 툴바는 여러 버튼 그룹을 하나로 통합한 형태를 하고 있다. 정리하자면 아래와 같은 형태이다.

<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default">텍스트</button>
        ...... 여러 버튼 준비 ......
    </div>
    ...... 여러 버튼 그룹 준비 ......
</div>

<div class="btn-toolbar">라는 태그가 기반이 되어, 그 안에 <div class="btn-group">에서 버튼 그룹을 준비하고 있다. 버튼 그룹을 이해했다면, 그다지 복잡하지 않을 것이다.

실제 사용 예제를 아래와 같다.

<!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>Button Toolbar</h2>
        </div>
         
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn btn-default">One</button>
                <button class="btn btn-default">Two</button>
                <button class="btn btn-default">Three</button>
            </div>
            <div class="btn-group">
                <input type="button" class="btn btn-default" value="Four">
                <input type="button" class="btn btn-default" value="Five">
            </div>
            <div class="btn-group">
                <div class="btn btn-default">Six</div>
                <div class="btn btn-default">Seven</div>
            </div>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>

여기에서는 총 7개의 버튼을 3개의 버튼 그룹으로 정리하여 표시하고 있다.

코드를 보면 알겠지만, <button>과 <input type="button">뿐만 아니라 <div> 태그로 버튼 그룹을 만들고 있다. class="btn btn-default"와 같이 버튼의 클래스를 설정해 주면, 버튼과 관계된 태그가 아니어도, 버튼의 표시를 할 수 있다. 물론, 클릭도 할수 있어서 제대로 사용할 수 있다.



드롭다운(dropdown)

버튼을 클릭하면 메뉴가 드롭다운 되는 인터페이스는 응용 프로그램에서 일반적으로 사용된다. HTML에서는 <select>를 사용하여, 하나의 행만 표시시키면 비슷한 것을 만들 수 있다. 하지만 <select>는 어디 까지나 여러개 중에서 항목을 선택하는 것이다. 일반적인 메뉴처럼 뭔가를 실행시키거나 하는 사용법이 아니다(JavaScript를 써서 대응시킬 수 있지만...).

드롭다운

이렇게 "클릭하여 메뉴가 나타나고, 선택해서 뭔가 실행"하는 인터페이스를 간단히 만들 수 있는 것이 Bootstrap의"드롭다운"이다. 이것은 아래와 같은 형태로 작성한다.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        버튼의 표시 텍스트
        <span class="caret"> </ span>
    </ button>
    <ul class="dropdown-menu" role="menu">
        <li role="presentation">
            <a href="#">메뉴 항목</a>
        </ li>
        ...... <li> 메뉴 항목을 준비 ...
    </ ul>
</ div>

매우 복잡해 보이지만, <div class="dropdown"> 태그 안에 버튼의 태그와 표시되는 메뉴의 내용이 되는 <ul>태그가 포함되어 있는 것을 알 수 있을 것이다. 대충 각 태그를 정리해 설명한다.

드롭 다운 태그

<div class = "dropdown">

가장 바깥 쪽의 베이스가 되는 태그이다. 이것은 dropdown를 클래스에 지정해야 한다.

버튼 태그

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

버튼의 표시 부분이 되는 태그이다. 이는 매우 까다롭다. 먼저, class 속성에 표시되는 버튼에 대한 클래스와 "dropdown-toggle"라는 클래스를 지정한다. 그리고 data-toggle="dropdown"라는 속성을 추가한다. 이것으로 버튼의 준비가 완료된다.

다만, 잘 보면 <button> 태그 안에 <span class="caret"></ span>와 같은 태그가 추가되어 있다. 이것은 뭐냐하면 버튼 이름의 끝에 붙이는 ▼를 표시하기 위한 것이다. 아무튼, 없어도 드롭 다운 동작에 지장은 없다.

메뉴의 <ul> 태그

<ul class="dropdown-menu" role="menu">

표시하는 메뉴는 <ul> 태그를 사용한 목록으로 준비한다. 이 <ul> 태그에는 "dropdown-menu"라는 클래스를 설정해야 한다. 거기에 더해 role="menu"라는 속성을 준비해 둔다.

메뉴 항목 <li> 태그

<li role="presentation">

<ul> 태그 안에 포함하는 메뉴 항목은 <li> 태그를 사용하여 준비한다. 이 태그는 role="presentation"이라는 속성을 추가해야 한다.

이 <li> 태그 안에 포함하는 메뉴 항목의 텍스트는 <a> 태그를 사용하여 작성한다. 이것을 잊으면 메뉴를 선택할 수 없게되어 버린다.

그럼 아래에 실제 사용 예제를 보도록 하자.

<!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>Dropdown</h2>
        </div>
         
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Number
                <span class="caret"></span>
                </button>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#">One</a>
                </li>
                <li role="presentation">
                    <a href="#">Two</a>
                </li>
                <li role="presentation">
                    <a href="#">Three</a>
                </li>
            </ul>
        </div>
    </div>
</div>
 
</div>
 
</body>
</html>

"Number"라는 버튼을 표시하고, 이를 클릭하면 3개의 메뉴 항목이 드롭다운으로 표시된다.



버튼 그룹 안에 드롭다운을 조합

이 드롭다운은 단체로 사용하는 것은 물론이고, 버튼 그룹과 버튼 툴바를 통합하여 사용할 수도 있다. 이것에 좀 주의해야 할 점이 있다.

<div class="btn-group">
    ...... 버튼 태그 ......

    <div class="btn-group" role="group">
        <button class="btn btn-default dropdown-toggle"
            data-toggle="dropdown">버튼의 텍스트</ button>

        <ul class="dropdown-menu" role="menu">
            <li role="presentation">
                <a href="#"> 메뉴 항목 </a>
            </ li>
            ...... 필요한 만큼의 <li>을 준비 ......
        </ ul>
    </ div>

</ div>

버튼 그룹은 <div class="btn-group">안에 버튼 태그를 작성하고 있다. 여기에서 필요에 따라 드롭다운의 태그를 준비해 둔다. 하지만, 잘 보면 드롭다운의 기반이 되고 있는 <div> 태그가 아래와 같이 되어 있다.

<div class="btn-group" role="group">

버튼 그룹의 항목이 되는 <div> 태그 안에 드롭다운 관련의 태그가 작성되어 있는 것을 알 수 있을 것이다. <div class="dropdown">은 사용하지 않는다.

아래에 실제 사용 예제이다.

<!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>Button Group</h2>
        </div>
         
        <div class="btn-group">
            <div class="btn btn-default">String</div>
            <div class="btn btn-default">Bool</div>
            <div class="btn-group" role="group">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Number
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li role="presentation">
                        <a href="#">One</a>
                    </li>
                    <li role="presentation">
                        <a href="#">Two</a>
                    </li>
                    <li role="presentation">
                        <a href="#">Three</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
     
</div>
 
</body>
</html>

버튼 그룹, 버튼 툴바 그리고 드롭다운을 알면, 이들을 조합한 인터페이스를 만들 수 있게 된다.



프로그래스바(progress-bar)

전체 진행 상황 등을 표시하는데 사용되는 것이, 진행률 표시 줄이다. 가로 줄에 진행 정도에 따라 막대가 뻗어나가는 것이다. 파일 복사 등, 모든 장면에서 사용되고 있다.

이 진행률 표시 줄도 Bootstrap에는 원래의 인터페이스로 사용할 수 있다. 이것은 아래와 같은 형태로 작성한다.

<div class="progress">
    <div class="progressbar" role="progressbar" style="width : 가로 설정">
        줄에 표시할 텍스트
    </ div>
</ div>

프로그래스바는 2개의 <div>에 의해 구축된다. 외부 <div>에 진행률이 전체의 배경이 되는 것으로 class="progress"를 지정해야 한다.

그리고 내부 <div>이 줄 부분이 되는 것으로, 이것은 class="progressbar"role="progressbar"를 지정해야 한다. 내부 바의 길이는 width 스타일로 지정한다. 예를 들어, style="width:50%;"와 같이 지정하면, 전체의 절반 길이의 막대가 표시된다.

진행률 표시줄은 바의 표시에 관한 클래스가 몇개 준비되어 있다. 먼저 바의 표시 색에 관한 것이다.

바 색상 설정

  • progress-bar-default
  • progress-bar-success
  • progress-bar-info
  • progress-bar-warning
  • progress-bar-danger

"progress-bar-" 뒤에 붙어있는 단어는 어디선가 본 적이 있을 것이다. 버튼의 스타일 등으로 지금까지 사용한 적이 있었다. progress-bar-xxxx와 같이 표시하는 용도에 따라 단어를 붙이면, 바의 색이 그에 맞게 변경된다.

줄무늬 표시

  • progress-bar-striped

또 하나, 바 스트라이프(줄무늬) 표시(대각선이 들어간 것)를 하기 위한 클래스도 준비되어 있다. class 속성에 progress-bar-striped를 추가하여 바에 줄무늬 표시할 수 있다.

추가적으로 class 속성에 "active"를 추가하여, 애니메이션으로 줄무늬 표시할 수 있다.

그럼 이것도 사용 예제를 아래에 올려 두었다.

<!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>Progress Bar</h2>
        </div>
         
        <div class="progress">
            <div class="progress-bar" role="progressbar"
                style="width: 35%;">
                35%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" style="width: 65%;">
                65%
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped active"
            role="progressbar" style="width: 95%;">
                95%
            </div>
        </div>
         
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서는 3개의 진행률 표시 줄을 표시하고 있다. 중간의 것은 그린에 아래의 것은 빨간색으로 표시되고, 아래 하단 바는 애니메이션으로 줄무늬 표시한다.



아이콘(icon)와 배지(badge)


Bootstrap에는 입력폼(form)에 대한 독자적인 디자인도 준비되어 있다. 입력폼의 기본 컨트롤 표시 및 전송에 사용하는 푸시 버튼의 사용에 대해 설명한다.


입력폼(form)과 관련된 기본 클래스

사용자 입력을 위한 기본은 "입력폼(form)"이다. 입력폼은 HTML에 있는 <form> 태그와 각종 컨트롤 종류의 태그를 조합해서 만든다.

입력폼 태그의 그대로 Bootstrap 이용에 있어서도 기본적으로 바뀌지 않는다. 입력폼은 HTML 태그를 사용하여 작성하지 않으면 입력폼으로 작동하지 않기 때문이다.

다만, 표시는 자체적인 것을 사용할 수 있다. 이는 몇개의 스타일을 사용하여 설정한다. 기본적인 작성법은 다음과 같다.

<form>
    <div class="form-group">
        <label for="foo">라벨</label>
        <input type="text" class="form-control" id="foo">
    </div>

    ...... 필요한만큼 태그를 제공 ......

</form>

class="form-group"

입력폼의 컨트롤 종류는 하나 하나가 class="form-group"를 설정된 <div> 태그로 정리된다. 그러면 Bootstrap은 각각을 그룹으로 배치한다.

예를 들어 <label>와 <input>가 그 중에 있으면, 레이블 아래에 입력 항목을 정렬된 형태로 배치된다. 이 입력 항목 그룹화하는 것이 class="form-group"라는 클래스이다.

class="form-control"

입력하는 컨트롤 종류는 class="form-control"라는 클래스를 제공한다. 그러면 Bootstrap 자체 만의 스타일로 컨트롤이 표시되도록 한다.

다만, 이것을 지정하는 것은 "텍스트 입력 관계의 컨트롤"과 "선택 목록(<select>)"이다. 텍스트 관계라는 것은 <input type="text"><input type="password"> , <textarea> 이다. 그밖에(체크 박스와 라디오 버튼)에 대해서는 별도 클래스가 준비되어 있다.

그럼 간단한 사용 예제를 보도록 하자.

<!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 >form</h2>
        </div>
         
        <form>
            <div class="form-group">
            <label for="txt1">Text:</label>
                <input type="text" class="form-control" id="txt1">
            </div>
            <div class="form-group">
                <label for="pw1">Password:</label>
                <input type="password" class="form-control" id="pw1">
            </div>
            <div class="form-group">
                <label for="ta1">Text Area:</label>
                <textarea class="form-control" id="ta1" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="sl1">Password:</label>
                <select class="form-control" id="sl1">
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
            <div class="form-group">
                <input type="button" class="btn" value="Click">
            </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

위에 입력 필드, 암호 필드, 텍스트 영역 등을 표시하는 입력폼 샘플이다. <input><textare><select>와 같은 컨트롤 관계의 태그에 각각 <div class="form-group"> 태그로 둘러싸이고, class="form-control"으로 설정되어 있는 것을 알 수 있다.


체크 박스(checkbox)와 라디오 버튼(radio)

입력폼 스타일 설정에 주의가 필요한 것은 체크 박스와 라디오 버튼이다. 이것들은 class="form-group"와 class="form-control"은 사용하지 않는다. 대신에 전용의 클래스가 준비되어 있다.

체크 박스

<div class="checkbox">
    <label for="foo">
        <input type="checkbox" id="foo">
        라벨
    </label>
</div>

체크 박스는 <div class="checkbox">라는 태그로 묶어 작성한다. 그러면 Bootstrap 스타일 체크 박스가 표시된다.

라디오 버튼

<div class="radio">
    <label for="foo">
        <input type="radio" id="foo">
        라벨
    </label>
</div>

라디오 버튼은 <div class="radio">라는 태그로 묶어 작성한다. 이것으로 라디오 버튼 Bootstrap 스타일을 완성한다.

어째든, 실제 이용에는 <label>을 사용하여 라벨 표시를 결합이 될 것이다. <label>은 <div> 태그 안에 포함시켜 표시해야 한다.

비활성화(disabled) 클래스

체크 박스나 라디오 버튼을 사용할 수 없게 하려면, 해당 태그에 "disabled"를 지정할 수 있다. 이 경우 <div> 태그의 class에 "disabled" 클래스를 추가해야 한다. 그러면 마우스 포인터가 컨트롤 위에 오면 사용할 수 없다는 것을 나타내는 커서로 바뀌게 된다.

 

그럼, 이것도 간단한 사용 예제는 아래에 올려둔다.

<!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 >form</h2>
        </div>
         
        <form>
            <div class="checkbox">
                <label for="cb1">
                    <input type="checkbox" id="cb1">
                    Check Box
                </label>
            </div>
            <div class="checkbox disabled">
                <label for="cb2">
                    <input type="checkbox" id="cb2" disabled>
                    Check Box
                </label>
            </div>
            <div class="radio">
                <label for="rb1">
                    <input type="radio" id="rb1" name="rb">
                Radio Button No, 1.
                </label>
            </div>
            <div class="radio">
                <label for="rb2">
                    <input type="radio" id="rb2" name="rb" checked>
                Radio Button No, 2.
                </label>
            </div>
            <div class="radio disabled">
                <label for="rb3">
                    <input type="radio" id="rb3" name="rb" disabled>
                Radio Button No, 3.
                </label>
            </div>
            <div class="form-group">
                <input type="button" class="btn" value="Click">
            </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

체크 박스와 라디오 버튼에 각각 사용 가능한 것과 이용 불가인 것을 표시하고 있다.


인라인 입력폼(form-inline)

입력폼은 기본적으로 세로로 정렬되어 있다. 그러나, 입력 항목이 그정도로 많지 않은 경우는 가로로 표시했으면 하는 경우도 있다.

그런 경우는 Bootstrap에는 "인라인 입력폼"이라는 것을 사용할 수 있다. 이것은 매우 간단하고 <form> 태그에 다음과 같이 클래스 설정을 할뿐이다.

<form class="form-inline">

이것으로 입력폼의 입력 항목이 가로로 표시되게 된다. 입력폼에 포함된 컨트롤 종류의 작성은 일반 방식과 동일하다. <div class="form-group"> 태그 및 입력 태그의 class="form-control" 지정도 변함이 없다.

매우 독특한 것은, 옆에 표시되는 것은 가로폭이 충분히 있을 때에 가로폭이 어느 정도 더 좁아지면 자동으로 세워 배치되게 된다. 즉, 가로 배치 및 세로 배치는 Bootstrap을 관리해 준다.

아래에 간단한 사용 예제를 올려 두었다.

<!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>form</h2>
        </div>
         
        <form class="form-inline">
            <div class="form-group">
                <label for="txt1">Text:</label>
                <input type="text" class="form-control" id="txt1">
            </div>
            <div class="form-group">
                <label for="pw1">Password:</label>
                <input type="password" class="form-control" id="pw1">
            </div>
            <div class="form-group">
                <input type="button" class="btn" value="Click">
            </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

가로폭을 넓혀 보면 가로 정렬되지만, 좁히면 세로로 바뀐다.



입력 그룹(input-group)

입력 항목이라는 것은 "필드가 하나가 있을 뿐"인 경우는 그다지 별로 없다. 보통은 그 항목 이름의 라벨과 함께 표시된다.

특히, 인라인 입력폼 등으로 한줄에 항목을 표시하는 경우는 라벨과 필드가 하나가 되어 표시되었으면 하는 경우가 있다. 이렇게 "텍스트 등 입력 항목을 그룹화하여 표시"하고 싶은 경우에 사용되는 것이 Bootstrap의"입력 그룹"이라는 것이다.

이것은 텍스트 등을 하나의 그룹으로 구성하여 표시하는 것으로, 다음과 같이 입력 항목을 작성한다.

<div class="input-group">
    <input type="text" class="form-control">
    ……그룹으로 정리된 항목을 작성……
</div>

입력 항목을 둘러싼 <div> 태그에 class="input-group"라는 형태로 태그를 제공한다. 그러면 그 안에 작성한 것을 하나로 통합할 수 있다.

이 <div> 태그 내에는 <input> 외에 텍스트를 표시하기 위한 <span> 태그도 사용할 수 있다. 이것은 다음과 같이 클래스를 작성해야 한다.

<span class="input-group-addon">텍스트</span>

class="input-group-addon"을 지정하여, 인라인 그룹의 요소의 하나로서 텍스트가 표시될 수 있다.

그럼 이것도 간단한 사용 예제를 올려 두었다.

<!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>form</h2>
        </div>
         
        <form>
        <div class="form-group input-group">
            <span class="input-group-addon">Name</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">Password</span>
            <input type="password" class="form-control">
        </div>
        <div class="form-group input-group">
            <span class="input-group-addon">GMail Address</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">@gmail.com</span>
        </div>
        <div class="form-group">
            <input type="button" class="btn" value="Click">
        </div>
        </form>
    </div>
</div>
     
</div>
 
</body>
</html>

위에 예제에는 2개의 입력 그룹을 표시하는 샘플을 게재하고 있다.

이 예제에는, 예를 들어 아래와 같은 형태로 입력 그룹이 작성되어 있다. 여기서 class="form-group input-group"과 같이 입력폼 그룹과 입력 그룹의 두 클래스를 지정하고 있다.

<div class="form-group input-group">
    <span class="input-group-addon">Name</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">Password</span>
    <input type="password" class="form-control">
</div>

여기에는 2개의 <span>과 2개의 <input>을 1개의 그룹으로 구성하고 있다. 실제 표시를 보면 알 수 있지만, 이 4가지 요소를 1개의 그룹이 되어, 가로 일렬로 일체화되어 표시된다.

입력 그룹은 하나의 행으로 표시하고 싶은 항목(인라인 입력폼의 일종)의 생성에 특히 위력을 발휘한다. 또한, 이 인라인 입력폼은 <form> 안에 국한된 것이 아니라, <form>을 사용하지 않고도 사용할 수 있다.



버튼(btn)

지금까지의 입력폼 샘플에서 하나를 언급하지 않은 항목이 있다. 그것은 "버튼"이다. 샘플의 입력폼에 있는 버튼을 보면, 아래와 같은 식으로 작성되어 있는 것을 알 수 있다.

<input type="button" class="btn" value="Click">

class="btn"로 지정되어 있는데, 이는 Bootstrap 자체의 버튼 스타일을 할당하기 위한 것이다. 이 btn 클래스를 지정하면, 원래 스타일의 버튼이 표시된다.

버튼(Button)

가장 기본적인 형태는 다음과 같다.

<button class="btn btn-default">button</button>

btn은 공통적으로 적용되는 모양을 정의하고, btn-default는 테두리나 배경색 등을 정의한다.

여기에서는 <button>를 사용하고 있는데, 물론 <input>에서도 동일하게 사용할 수 있다. 그리고 입력폼 이외(<form> 태그 이외)에서도 <a><button><input> 등의 태그에 클래스를 추가하여 버튼 모양을 만들 수 있다.

이 btn 클래스는 푸시 버튼의 기반이 되는 클래스이며, 이것만으로 Bootstrap 버튼이 아니다. 이 외에도 다음과 같은 클래스가 준비되어 있다.

색(Color)

Bootstrap은 btn-default 대신에 넣을 수 있는 값으로 총 7가지의 버튼 모양을 제공한다.

  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warningg
  • btn-danger
  • btn-link

위에 클래스들은 btn 클래스와 함께 사용한다. 베이스가 되는 디자인은 모두 동일하고, 표시되는 버튼의 색상만 변경된다.

크기(Size)

버튼 크기를 정의하는 클래스는 아래와 같다.

  • btn-lg : 큰 버튼
  • btn-sm : 작은 버튼
  • btn-sx : 더 작은 버튼

이 클래스들을 버튼의 class에 추가하여 크기를 조정할 수 있다.

btn-block은 버튼의 블록 요소로 만든다. 크기를 정하는 클래스와 블록 요소로 만드는 클래스는 같이 사용할 수 있다.

상태(State)

버튼의 상태를 활성화 및 비활성화 상태로 만들 수 있다.

active - 활성화 상태

버튼을 처음부터 누른 상태에서 표시 할 경우에는 class에 "active"를 추기한다. 사용은 class="btn btn-default active"와 같이 한다.

disabled - 비활성 상태

버튼을 사용할 수 없는 상태로 하고 싶은 경우는 class에 "disabled"를 지정한다. 비활성화된 상태인 경우 클릭이 되지 않는다. 사용은 class="btn btn-default disabled"와 같이 한다.

 

실제로 어떤 표시가 되는지, 아래에 샘플을 올려 두었다.

<!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 | Button</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
      h1 {
        font-size: 20px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1>Button</h1>
          <p>
            <a href="#" class="btn btn-default">a</a>
            <button class="btn btn-default">button</button>
            <input type="submit" value="input" class="btn btn-default">
            <span class="btn btn-default">span</span>
          </p>
          <h1>Color</h1>
          <p>
            <button class="btn btn-default">Default</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-success">Success</button>
            <button class="btn btn-info">Info</button>
            <button class="btn btn-warning">Warning</button>
            <button class="btn btn-danger">Danger</button>
            <button class="btn btn-link">Link</button>
          </p>
          <h1>Size</h1>
          <p>
            <button class="btn btn-default btn-xs">btn-xs</button>
            <button class="btn btn-default btn-sm">btn-sm</button>
            <button class="btn btn-default btn-lg">btn-lg</button>
          </p>
          <p>
            <button class="btn btn-default btn-block">btn-block</button>
          </p>
          <p>
            <button class="btn btn-default btn-lg btn-block">btn-lg btn-block</button>
          </p>
          <h1>State</h1>
          <p>
            <button class="btn btn-primary active">button - active</button>
            <a href="#" class="btn btn-danger active">a - active</a>
            <button class="btn btn-primary" disabled="disabled">button - disabled</button>
            <a href="#" class="btn btn-danger disabled">a - disabled</a>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>


Bootstrap에서는 Web 페이지에 게재하는 일반적인 콘텐츠 작성 어떻게 할 것인가. 주요 것에 대해 정리하여 설명한다.


헤더, 제목, 본문

콘텐츠의 기본은 "헤더", "제목", "본문"라고 하는 텍스트이다. 이들은 기본적으로 HTML 태그 그대로 이다.

아래에 아주 간단한 내용의 예제이다.

<!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>서브 타이틀</h2>
        </div>
         
        <h3>작은 제목</h3>
        <p>
        이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
        이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
                이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
        </p>
         
        <blockquote>
            <p><small>인용 텍스트</small></p>
        </blockquote>
        <blockquote class="pull-right">
            <p><small>인용 텍스트</small></p>
        </blockquote>
    </div>
</div>
     
</div>
 
</body>
</html>

이를 바탕으로 주요 콘텐츠 요소에 대해 설명한다.

제목(title)과 머리글(header)

제목은 <h1> ~ <h3> 태그를 사용하고 있다. 아무런 특색도 없는 단순한 태그이다. 여기에 샘플에서는 <h1><h2>와 <div class="page-header">와 같은 태그를 사용하고 있다.

이 class="page-header"라는 스타일은 헤더 부분의 스타일 클래스이다. 이것을 지정하여 그 부분을 헤더로 분리 표시한다.

콘텐츠

콘텐츠는 보통 <p> 태그를 사용하여 작성하면 된다. 이것는 특별한 것은 아무것도 필요하지 않다.

인용 표시

그밖에 인용문는 <blockquote> 태그을 사용하였다. 이는 클래스를 지정하지 않으면 보통 왼쪽으로 정렬되고, class="pull-right"를 지정하면 오른쪽에 정렬된다. 또한, 이 표시는 글꼴 크기 등에 영향을주지 않기 때문에, 일반적으로 <small> 태그로 다소 작게 하여 인용문 답게 할 수 있다.

  • 이와 같이 콘텐츠의 기본 요소는 태그 자체의 HTML 표준을 사용할 뿐이다. 몇개의 스타일 클래스를 지정하고 있지만, Bootstrap이라는 점에는 그뿐이다. 대부분 Bootstrap 등 의식하지 않고 일반적인 콘텐츠를 작성하면 된다.



테이블(table)

테이블은 보통의 <table> 태그를 사용하여 작성한다. 이 테이블에 대한 스타일이 준비되어 있으며, 스타일 클래스를 지정하여 디자인을 설정할 수 있다.

이 클래스는 <table> 태그에 지정하는 것으로, 다음과 같은 클래스가 준비되어 있다.

테이블의 기본 표시

<table class="table">

테이블의 기본 클래스이라고 할 수 있다. 일반적인 테이블이다. 보기 쉽게 각 행마다 가로줄이 들어간다. 테이블 표시에는 이 클래스를 사용한다.

표의 가로폭을 100%로 만들고, 표의 내부에 가로선을 만든다.

<h1><code>class="table"</code></h1>
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>1,000,000</td>
      <td>5</td>
      <td>5,000,000</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>500,000</td>
      <td>6</td>
      <td>3,000,000</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>300,000</td>
      <td>10</td>
      <td>3,000,000</td>
    </tr>
  </tbody>
</table>

스트라이프(줄무늬) 표시

<table class="table table-striped">

<tbody> 안에 표시되는 짝수행과 홀수행에 배경색을 변경하는 스트라이프 넣는다. table-striped 클래스를 추가한다.

:nth-child 선택자를 이용하므로 IE8 이하에는 적용되지 않는다.

<h1><code>class="table table-striped"</code></h1>
<table class="table table-striped">
  ...
</table>

보더(border) 표시

<table class="table table-bordered">

이는 전체 사각 테두리로 둘러싸고, 각 항목에 테두리를 긋고 표로 만든다. table-borderd 클래스를 추가한다.

바깥쪽과 열 사이에도 선을 그린다.

<h1><code>class="table table-bordered"</code></h1>
<table class="table table-bordered">
  ...
</table>

호버(hover)

<table class="table table-hover">

마우스 포인터가 있는 행의 배경을 바꾸어 눈에 띄도록 하기 위한 것이다. table-hover 클래스를 추가한다.

마우스 포인터를 올리면 배경색이 변한다.

<h1><code>class="table table-hover"</code></h1>
<table class="table table-hover">
  ...
</table>

행 높이 줄여서 표시

<table class="table table-condensed">

행 높이를 줄인다.

<h1><code>class="table table-condensed"</code></h1> <table class="table table-condensed"> ... </table>

 

그밖에 기본 table 클래스에 필요에 따라서 그외의 클래스를 추가하여 사용한다. 예를 들어, <table class="table table-bordered table-hover">라고 하면, 테이블을 표 형태로 표시하고, 더욱 마우스 포인터가 있는 행을 두드러지게 하는 것이다.

배경색

이 외에 특정 행이나 셀(항목)을 눈에 띄게 하기 위한 것으로 다음과 같은 클래스가 준비되어 있다. <tr><td><th> 태그에 클래스를 추가하여 배경색을 넣을 수 있다.

클래스의 값으로 active, success, info, warning, danger를 사용할 수 있다.

클래스설명
class="info"정보. 간단한 메시지 표시.
class="warning"주의 · 경고, info보다 두드러지게 표시에 사용하는 것.
class="success"어떤 작업이 성공적으로 완료되었다는 메시지용.
class="error"어떤 작업이 실패했음을 나타내는 메시지용.
<h1>Background Color</h1>
<table class="table">
  <thead>
    <tr class="active">
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>Notebook</td>
      <td>1,000,000</td>
      <td>5</td>
      <td>5,000,000</td>
    </tr>
    <tr class="info">
      <td>Tablet</td>
      <td>500,000</td>
      <td>6</td>
      <td>3,000,000</td>
    </tr>
    <tr>
      <td class="warning">Monitor</td>
      <td class="danger">300,000</td>
      <td class="warning">10</td>
      <td class="danger">3,000,000</td>
    </tr>
  </tbody>
</table>

가로 스크롤

<div class="table-responsive">

가로폭 768px 미만에서 표 안의 내용이 줄바꿈이 될 정도로 표가 크다면, 표를 줄이지 않고 가로 스크롤바를 만든다.

<h1>Responsive Table</h1>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
    </tbody>
  </table>
</div>

조합하여 사용하기

이것들을 조합하여 테이블을 만든다. 이용 예제는 아래와 같다.

<!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>테이블</h2>
        </div>
         
        <table class="table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>성진</td>
                    <td>sungjin@dekuma.com</td>
                    </tr>
                <tr>
                    <td>2</td>
                    <td>원석</td>
                    <td>wonsuk@flower</td>
                </tr>
                <tr class="info">
                    <td>3</td>
                    <td>병호</td>
                    <td>byeongho@happy</td>
                </tr>
            </tbody>
        </table>
         
    </div>
</div>
     
</div>
 
</body>
</html>

<table class="table">으로 테이블을 만들고, 세번째 <tr> 태그에 class="info"를 지정하고 있다.



패널(panel)

Web 페이지의 콘텐츠와 분리된 내용을 페이지에 컴팩트하게 정리하여 표시하고 싶은 경우가 있다. 어떤 종류의 칼럼이거나 주의, 경고 표시 등과 같이 본래는 경고와 다이어로그를 표시하는 경우이다.

이러한 때에 편리한 것이 "패널(panel)"이다. 이는 Bootstrap 자체의 보기에서 페이지에 별도의 콘텐츠를 포함을 간단히 할 수 있다. 이 패널은 다음과 같은 형태로 작성한다.

<div class="panel">
    <div class="panel-heading">
        <p class="panel-title">타이틀</p>
    </div>
    <div class="panel-body">
        내용
    </div>
    <div class="panel-footer">
        꼬리말
    </div>
</div>

패널는 class="panel"라는 클래스를 지정한 <div> 태그를 사용하여 작성한다(다만, panel 외에 뒤에 오는 패널 스타일에 클래스가 필요하다).

패널에는 헤더, 바디, 풋터의 3개의 태그를 제공한다. 각각 class="panel-title"class="panel-bodyclass="panel-footer라는 클래스를 지정한다. 또한, 헤더 부분에는 타이틀 표시의 스타일을 지정하는 class="panel-title이 준비되어 있다.

패널의 스타일 설정

실제로 패널을 제공하는 경우는 class="panel"에 추가적으로 패널의 스타일에 대한 클래스를 추가한다. 여기에는 아래와 같은 것이 준비되어 있다.

클래스설명
paner-default기본 패널이다. 전체적으로 회색색을 바탕으로 표시한다.
panel-primary파란색의 제목와 테두리를 표시한 보다 명확하게 눈에 띄는 스타일이다.
panel-success어떤 동작이 성공한 메시지용이며, 밝은 녹색의 제목이다.
panel-info정보 표시용이며, 밝은 파란색의 제목이다.
panel-warning경고 표시용이며, 노란 제목이다.
panel-danger위험을 알리기 위한 것으로, 붉은 보라 같은 제목이다.

이것들은 class="panel"와 같이 설정하여 패널이 표시되게 된다. 이용 예제를 아래와 같다.

<!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>패널</h2>
        </div>
         
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    패널 표시에 대해
                </h3>
            </div>
            <div class="panel-body">
                <p>여기에 패널의 컨텐츠을 준비한다.
                여기에 패널의 컨텐츠을 준비한다.
                여기에 패널의 컨텐츠을 준비한다.</p>
            </div>
            <div class="panel-footer">
                copyright devkuma.
            </div>
        </div>
         
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서는 <div class="panel panel-primary"> 이라는 형태로 패널용 태그를 제공하고 있다.



점보트론(jumbotron)

점보트론은 어떤 특정 컨텐츠나 정보를 두르러지게 하기위한 큰 박스를 말한다. 점보트론은 라운드 코너를 가진 회색 박스로 디스플레이 된다. 그 안에 폰트 사이즈 역시 확장된다.

이 점보트론는 다음과 같이 작성한다.

<div class="jumbotron">
    <div class="container">
        여기에 표시 할 내용을 쓰기
    </div>
</div>

이것은 회색 배경으로 채워진 패널 안에 내용을 표시한다. 이 점보트론은 분명히 강조하고 싶은 내용을 표시하는데 유용하다.

점보트론는 "well"라는 클래스도 준비되어 있다. class="jumbotron well"로 지정하면 윤곽이 약간 명확한 스타일이 된다.

(덧붙여서, "점보 트론"라고하는 것은, SONY가 개발한 대형 전광판을 통칭하기도 한다.)

<!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>점보트론</h2>
        </div>
         
        <div class="jumbotron well">
            <div class="container">
            <p>점보트론 표시이다.  점보트론 표시이다. 
            점보트론 표시이다.  점보트론 표시이다. </p>
            </div>
        </div>

    </div>
</div>
     
</div>
 
</body>
</html>



문자색(text)와 배경색(bg)

HTML에는 스타일 시트를 사용하여 텍스트를 자유롭게 색상 설정을 할 수 있다. 그리고, Bootstrap에는 다양한 부품의 역할과 중요성에 대해 몇가지 스타일을 준비하고 있고, 각각 고유의 색상이 설정되어 있다.

앞에서 이미, 여러가지 설명 등은 진한 파란색이 사용되고, 위험한 작업에는 빨간색이 사용된다고 설명했었다.

알림 및 대화, 버튼 등 다양한 GUI 부품이 Bootstrap에 준비되어 있는데, 그것을 살펴보면 "이것은 초보자의 설명용", "이것은 위험 경고"라는 식의 용도로 클래스 지정하면 그에 맞는 색상으로 디자인이 되도록되어있다..

따라서 텍스트의 색상도 미리 준비되어 있는 클래스를 사용하여, 그 중에서 선택 지정하는 것이 기본으로 되어 있다. 준비되어 있는 텍스트의 색상 관계 클래스는 다음과 같다.

텍스트 색

  • text-muted
  • text-primary
  • text-success
  • text-info
  • text-warning
  • text-danger

배경 색

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

아래에 이들을 사용하여 텍스트를 표시하는 예제를 보도록 하자.

<!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 >Color와 Background</h2>
        </div>
         
        <div>
            <p class="text-muted">이것은 text-muted 텍스트입니다.</p>
            <p class="text-primary">이것은 text-primary 텍스트입니다.</p>
            <p class="text-success">이것은 text-success 텍스트입니다.</p>
            <p class="text-info">이것은 text-infod 텍스트입니다.</p>
            <p class="text-warning">이것은 text-warning 텍스트입니다.</p>
            <p class="text-danger">이것은 text-danger 텍스트입니다.</p>
            <p class="bg-primary">class="bg-primary"</p>
            <p class="bg-success">class="bg-success"</p>
            <p class="bg-info">class="bg-info"</p>
            <p class="bg-warning">class="bg-warning"</p>
            <p class="bg-danger">class="bg-danger"</p>
        </div>
    </div>
</div>
     
</div>
 
</body>
</html>

이를 보면, 대체로 어느 것이 무슨 색인지 알게 될 것이다. 클래스 이름에 사용되는 "primary", "success"라는 단어는 Bootstrap 전체에서 공통으로 사용되고 있다. 앞으로 다양한 GUI 클래스에서 사용되고 있기에 지금부터 잘 기억해 두도록 하자.




이미지(img)

이미지는 정해진 크기대로 표시되기에, 크기를 정하지 않았다면 원본 크기대로 나온다. 따라서 웹브라우저의 가로 크기보다 큰 이미지가 있다면, 가로 스크롤바 또는 세로 스크롤바가 생긴다.

반응형 이미지

img 요소의 class 값에 img-responsive를 추가하면, 이미지의 가로 크기가 부모 요소의 가로 크기를 넘지 못합니다.

<img src="images/sample-image-01.png" alt="" class="img-responsive">

이미지 가운데 정렬

이미지를 가운데 정렬하고 싶다면 class의 값에 center-block을 추가한다.

<img src="images/sample-image-01.png" alt="" width="400" class="img-responsive center-block">

이미지 꾸미기

class에 값을 추가하는 것만으로 이미지를 꾸밀 수 있다.

클래스설명
img-rounded테두리를 곡선으로 만든다.
img-circle원 또는 타원으로 만든다.
img-thumbnail테두리를 곡선으로 만들고, 테두리와 이미지 사이에 여백을 만든다.

아래 여러 이미지를 표시하는 예제를 올려 두었다.

<!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>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-01.png" alt="" class="img-responsive"></p>
          <p><code>class="img-responsive center-block"</code></p>
          <p><img src="images/sample-image-01.png" alt="" width="400" class="img-responsive center-block"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-rounded"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-circle"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-thumbnail"></p>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

참고

다음의 코드를 CSS에 추가하면 img 요소의 class 값에 img-responsive를 추가하지 않아도, 모든 이미지가 반응형이 된다.

img { max-width: 100%; height: auto; }


+ Recent posts