<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>bootstrap 스타일</h1>
<h2>.form-group, .form-control</h2>
<p>
.form-group, form-control을 활용하면 입력폼 요소를 구성할 수 있다.
.form-group는 label과 폼 요소 (input, select, textarea)를 감싼다.
.form-control은 폼 요소의 몫을 100%로 설정한다.
</p>
<h2>기본 입력 폼</h2>
<div class="well">
<form>
<div class="form-group">
<label>이름</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>아이디</label>
<input type="text" class="form-control" name="userid" />
</div>
<div class="form-group">
<label>이전 근무지역</label>
<select class="form-control" name="workingarea">
<option value="서울">서울특별시</option>
<option value="부산">부산광역시</option>
<option value="인천">인천광역시</option>
<option value="광주">광주광역시</option>
</select>
</div>
<div class="form-group">
<label>관련 자격증 소지여부</label>
<div class="radio">
<label class="radio-inline">
<input type="radio" name="license" value="1"> 있음
</label>
<label class="radio-inline">
<input type="radio" name="license" value="0"> 없음
</label>
</div>
</div>
<div class="form-group">
<label>보유기술</label>
<div class="checkbox">
<div class="checkbox-inline">
<input type="checkbox" name="tech" value="개발"> 개발
</div>
<div class="checkbox-inline">
<input type="checkbox" name="tech" value="설계"> 설계
</div>
<div class="checkbox-inline">
<input type="checkbox" name="tech" value="분석"> 분석
</div>
<div class="checkbox-inline">
<input type="checkbox" name="tech" value="테스팅"> 테스팅
</div>
</div>
</div>
<div class="form-group">
<label>자기소개</label>
<textarea class="form-control" rows="10" name="username"></textarea>
</div>
<div class="text-right">
<input type="reset" class="btn btn-defaul" value="취소">
<input type="submit" class="btn btn-primary" value="가입">
</div>
</form>
</div>
<h2>수평폼</h2>
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">이름</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">시작일</label>
<div class="col-xs-4">
<input type="date" class="form-control" name="username" />
</div>
<label class="col-xs-2 control-label">종료일</label>
<div class="col-xs-4">
<input type="date" class="form-control" name="username" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>