본문 바로가기

카테고리 없음

BootStrap Form Layout

- 종류

vertical      :    수직으로 표시   

horizotal    :    폼 컨트롤과 해당 라벨만 단일 행에 표시

inline        :    모든 폼 컨트롤이 단일 행에 표시

- 적용 방법

<form role="form"> 이용

라벨과 폼 컨트롤을 <div class="form-group> 으로 감싼다.

<input>, <textarea>,<select>같은 텍스트 태그에 form-control 클래스를 추가한다.

이때 form 태그의 class에 form-inline 추가하면 inline, form-horizontal 추가하면 horizontal 된다.


출처 : w3school


<form role="form">
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>