부트스트랩 폼

1 개요[ | ]

Bootstrap form
Bootstrap .form-verticle
부트스트랩 폼

부트스트랩에서 기본 폼은 .form-verticle 클래스와 같음
부트스트랩에서는 <input>, <textarea>, <select> 요소의 기본 너비가 100%임

2 예시 1: 기본[ | ]

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
<form>
  <div class="form-group">
    <label for="email">이메일</label>
    <input type="email" class="form-control" id="email" placeholder="이메일을 입력하세요">
  </div>
  <div class="form-group">
    <label for="pwd">패스워드</label>
    <input type="password" class="form-control" id="pwd" placeholder="패스워드를 입력하세요">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> 로그인 유지</label>
  </div>
  <button type="submit" class="btn btn-default">로그인</button>
</form>

3 예시 2: well 클래스[ | ]

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>

<form class="well">
  <div class="form-group">
    <label for="email">이메일</label>
    <input type="email" class="form-control" id="email" placeholder="이메일을 입력하세요">
  </div>
  <div class="form-group">
    <label for="pwd">패스워드</label>
    <input type="password" class="form-control" id="pwd" placeholder="패스워드를 입력하세요">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> 로그인 유지</label>
  </div>
  <button type="submit" class="btn btn-default">로그인</button>
</form>

4 같이 보기[ | ]

5 참고[ | ]

http://www.w3schools.com/bootstrap/bootstrap_forms.asp