부트스트랩 인라인 폼 .form-inline

1 개요[ | ]

Bootstrap Inline Form
부트스트랩 인라인 폼
부트스트랩 .form-inline

폼 내부의 컨트롤들을 같은 줄에 이어서 출력하는 클래스
단, 화면 폭이 좁아지면 .form-verticle 형식으로 변경됨

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 class="form-inline">
  <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[ | ]

<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="form-inline">
  <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="이메일">
  </div>
  <div class="form-group">
    <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 예시 3[ | ]

<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="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">보낼 금액</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="1일 10만원 이내">
      <div class="input-group-addon">원</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">송금하기</button>
</form>

5 같이 보기[ | ]

6 같이 보기[ | ]