Bootstrap 3.3.7 입력폼(form)과 GUI 구성 요소
입력폼(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"으로 설정되어 있는 것을 알 수 있다.
체크 박스와 라디오 버튼
입력폼 스타일 설정에 주의가 필요한 것은 체크 박스와 라디오 버튼이다. 이것들은 class="form-group"와 class="form-control"은 사용하지 않는다. 대신에 전용의 클래스가 준비되어 있다.
체크 박스(checkbox)
<div class="checkbox">
<label for="foo">
<input type="checkbox" id="foo">
라벨
</label>
</div>
체크 박스는 <div class="checkbox">라는 태그로 묶어 작성한다. 그러면 Bootstrap 스타일 체크 박스가 표시된다.
라디오 버튼(radio)
<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>