Bootstrap 3.3.7 입력 구성 요소
버튼 그룹(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-defaultprogress-bar-successprogress-bar-infoprogress-bar-warningprogress-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)
이는 인터페이스는 아니지만, 인터페이스의 표시를 강화하는 것으로 ‘아이콘(icon)‘와 ‘배지(badge)‘와 에 대해 설명한다.
아이콘(icon)
Bootstrap에는 200개 이상의 아이콘이 포함되어 있다. 이것들은 <span> 태그에 클래스를 지정하여 간단히 표시할 수 있다.
<span class="glyphicon glyphicon-xxxx"></span>
클래스에는 class="glyphicon glyphicon-xxxx"와 같이 클래스를 지정한다. glyphicon는 그래픽 아이콘의 기본 클래스이다. 여기에 사용하는 아이콘을 표시하는 클래스 이름을 “glyphicon-xxxx"와 같이 추가한다(xxxx에는 표시하는 아이콘 이름을 지정한다).
예를 들어, 체크 마크를 표시하는 경우는 이런 식으로 작성하면 된다.
<span class="glyphicon glyphicon-ok"></span>
준비되어 있는 아이콘은 Bootstrap 사이트에서 확인할 수 있다. 매우 많이 있으므로, 실제로 몇개를 지정하여 보도록 하자.
http://getbootstrap.com/components/#glyphicons
배지(badge)
배지는 텍스트 옆에 붙이는 작은 표시이다. 예를 들어, Facebook의 “좋아요"버튼은 그 옆에 “좋아요"를 한 숫자가 풍선처럼 나타난다. 그것이 배지이다.
이 배지는 매우 간단히 붙일 수 있다. 이런 느낌이다.
<span class="badge">배지</span>
<span> 태그에 class="badge"라는 클래스를 붙이면, 그것으로 배지가 된다. 매우 간단하다.
그럼 아래에 아이콘과 배지의 이용한 예제를 보도록 하자.
<!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>Badge</h2>
</div>
<div class="form-group">
<a href="#"><span class="glyphicon glyphicon-ok"></span>
BadgeLink <span class="badge">7</span></a>
</div>
<div class="form-group">
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
Click <span class="badge">ok</span></button>
</div>
<div class="form-group">
<button class="btn btn-default btn-primary">
<span class="glyphicon glyphicon-tags"></span>
Click <span class="badge">ok</span></button>
</div>
<p><span class="glyphicon glyphicon-star"></span>
this is <span class="badge">Badge</span> content.</p>
</div>
</div>
</div>
</body>
</html>
실제로 해보면 알 수 있는 것은 “스타일이 자동 조정된다"는 것이다. 일반에 텍스트에 아이콘 및 배지를 넣으면, 검은색 바탕에 흰색 문자가 표시된다. 그리고 버튼으로 btn-primary 클래스를 설정한 경우, 흰색 바탕에 푸른색 문자로 아이콘, 배지가 표시된다. 추가된 태그의 스타일에 따라 배지의 표시도 자동 조정되는 것을 알수 있다.