부트스트랩4 양식 기본 설정

양식 제어는 부트스트랩4내에서 자동으로 글로벌 스타일을 적용받습니다.

.form-control 클래스를 갖는 모든 텍스트  <input>, <textarea>, <select>요소의 너비는 100%입니다.

부트스트랩4 양식 레이아웃

부트스트랩4는 두 가지 유형의 양식 레이아웃을 제공합니다.

• 누적형(전체폭) 양식
  
• 인라인 양식
  

누적형 (전체 폭) 양식

두 개의 입력 필드, 하나의 확인란, 버튼이 있는 누적형 양식 예제입니다.

<form action="/action_page.php">
    <div class="form-group">
      <label for="mb_id">아이디:</label>
      <input type="text" class="form-control" id="mb_id" placeholder="아이디를 입력하세요" name="mb_id">
    </div>
    <div class="form-group">
      <label for="mb_password">비밀번호:</label>
      <input type="password" class="form-control" id="mb_password" placeholder="비밀번호를 입력하세요" name="mb_password">
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> 자동로그인
      </label>
    </div>
    <button type="submit" class="btn btn-primary">로그인</button>
</form>

인라인 양식

인라인 형식에서 모든 요소는 인라인이며 왼쪽 맞춤입니다.

<form>요소에 .form-inline 클래스를 추가하세요.

** 이 양식은 최소 576px내의 양식에만 적용됩니다. 576px보다 작은 화면에서는 세로 방향으로 쌓이게 됩니다.

<form class="form-inline" action="/action_page.php">
    <label for="mb_id">아이디:</label>
    <input type="text" class="form-control" id="mb_id" placeholder="아이디를 입력하세요" name="mb_id">
    <label for="mb_password">비밀번호:</label>
    <input type="password" class="form-control" id="mb_password" placeholder="비밀번호를 입력하세요" name="mb_password">
    <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" name="remember"> 자동로그인
      </label>
    </div>
    <button type="submit" class="btn btn-primary">로그인</button>
</form>