부트스트랩 폼

개요

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

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

예시 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>

예시 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>

같이 보기

참고

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