부트스트랩 양식

❮ 이전의 다음 ❯

부트스트랩의 기본 설정

양식 컨트롤은 Bootstrap을 사용하여 일부 전역 스타일을 자동으로 받습니다.

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

부트스트랩 양식 레이아웃

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

세로 형식(기본값)
가로 형태
인라인 양식

세 가지 양식 레이아웃 모두에 대한 표준 규칙:

랩 레이블 및 양식 컨트롤 <div class="form-group">(최적의 간격에 필요)
.form-control모든 텍스트 <input>, <textarea>및 <select>요소 에 클래스 추가

부트스트랩 세로 형식(기본값)

이메일:

비밀번호:

날 기억해

다음 예제에서는 두 개의 입력 필드, 하나의 확인란 및 제출 버튼이 있는 세로 양식을 만듭니다.

예시

<form action="/action_page.php">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<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>

부트스트랩 인라인 양식

인라인 양식에서는 모든 요소가 인라인으로 왼쪽 정렬되고 레이블이 나란히 있습니다.

참고: 이것은 너비가 최소 768px인 뷰포트 내의 양식에만 적용됩니다!

인라인 양식에 대한 추가 규칙:

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

다음 예제에서는 두 개의 입력 필드, 하나의 확인란 및 하나의 제출 버튼이 있는 인라인 양식을 만듭니다.

예시

<form class="form-inline" action="/action_page.php">
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<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>

팁: 모든 입력에 레이블을 포함하지 않으면 화면 판독기가 양식에 문제를 일으킬 것입니다. .sr-only다음 클래스 를 사용하여 스크린 리더를 제외한 모든 장치의 레이블을 숨길 수 있습니다 .

예시

<form class="form-inline" action="/action_page.php">
<div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label class="sr-only" 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>

부트스트랩 가로 형태

가로 형식은 레이블이 대형 및 중형 화면에서 입력 필드(가로) 옆에 정렬된다는 의미입니다. 작은 화면(767px 이하)에서는 세로 형식으로 변환됩니다(레이블은 각 입력 상단에 배치됨).

수평 양식에 대한 추가 규칙:

요소 .form-horizontal에 클래스 추가<form>
.control-label모든 <label>요소 에 클래스 추가

팁: Bootstrap의 미리 정의된 그리드 클래스를 사용하여 레이블 및 양식 컨트롤 그룹을 수평 레이아웃으로 정렬합니다.

다음 예제에서는 두 개의 입력 필드, 하나의 확인란 및 하나의 제출 버튼이 있는 가로 양식을 만듭니다.

예시

<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
</div>
<div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>
</form>

❮ 이전의 다음 ❯

부트스트랩 3 튜토리얼

부트스트랩 그리드

부트스트랩 테마

부트스트랩 예제

부트스트랩 CSS 참조

부트스트랩 JS 참조