주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

형세

양식 레이아웃 옵션을 사용하여 인라인에서 수평, 맞춤형 그리드 구현에 이르기까지 양식에 구조를 부여하십시오.

이 페이지에서

양식

<form>양식 필드의 모든 그룹은 요소 에 있어야 합니다 . 부트스트랩은 요소에 대한 기본 스타일을 제공하지 않지만 기본적으로 <form>제공되는 몇 가지 강력한 브라우저 기능이 있습니다.

  • 브라우저 양식이 처음이신가요? 사용 가능한 속성의 개요와 전체 목록을 보려면 MDN 양식 문서 를 검토 하십시오.
  • <button>s는 <form>기본값 내에 type="submit"있으므로 구체적으로 노력하고 항상 a를 포함하십시오 type.
  • disabled의 속성을 사용하여 양식 내의 모든 양식 요소를 비활성화할 수 있습니다 <form>.

부트스트랩 은 거의 모든 양식 컨트롤에 적용되기 때문에 양식은 기본적으로 세로로 쌓 display: block입니다 . width: 100%추가 클래스를 사용하여 양식별로 이 레이아웃을 변경할 수 있습니다.

유용

여백 유틸리티 는 양식에 일부 구조를 추가하는 가장 쉬운 방법입니다. 레이블, 컨트롤, 선택적 양식 텍스트 및 양식 유효성 검사 메시지의 기본 그룹화를 제공합니다. 유틸리티를 고수하고 margin-bottom일관성을 위해 양식 전체에서 단일 방향을 사용하는 것이 좋습니다.

<fieldset>s, <div>s 또는 거의 모든 다른 요소 를 사용하여 원하는 대로 자유롭게 양식을 작성하십시오 .

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

양식 그리드

그리드 클래스를 사용하여 더 복잡한 양식을 작성할 수 있습니다. 여러 열, 다양한 너비 및 추가 정렬 옵션이 필요한 양식 레이아웃에 사용합니다. Sass $enable-grid-classes변수를 활성화해야 합니다 (기본적으로 켜져 있음).

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

거터

여백 수정자 클래스 를 추가 하여 여백 너비와 블록 방향을 인라인으로 제어할 수 있습니다. 또한 $enable-grid-classesSass 변수를 활성화 해야 합니다 (기본적으로 켜져 있음).

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

그리드 시스템으로 더 복잡한 레이아웃을 생성할 수도 있습니다.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

가로 형태

.row양식 그룹에 클래스를 추가하고 클래스를 사용 .col-*-*하여 레이블 및 컨트롤의 너비를 지정 하여 그리드가 있는 수평 양식을 만듭니다 . 연결된 양식 컨트롤과 함께 세로로 가운데에 오도록 s에도 추가 .col-form-label해야 합니다.<label>

때때로, 필요한 완벽한 정렬을 생성하기 위해 여백 또는 패딩 유틸리티를 사용해야 할 수도 있습니다. 예를 들어, padding-top텍스트 기준선을 더 잘 정렬하기 위해 누적 라디오 입력 레이블에서 제거했습니다.

라디오 
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

가로 양식 레이블 크기 조정

및 의 크기 를 올바르게 따르려면 .col-form-label-sm또는 .col-form-label-lg를 사용하십시오 .<label><legend>.form-control-lg.form-control-sm

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

열 크기 조정

이전 예에서 볼 수 있듯이 그리드 시스템을 사용 .col하면 .row. 사용 가능한 너비를 균등하게 분할합니다. 열의 하위 집합을 선택하여 공간을 더 많거나 적게 차지할 수도 .col있고 나머지는 와 같은 특정 열 클래스로 나머지를 균등하게 분할할 수도 .col-sm-7있습니다.

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

자동 크기 조정

아래 예에서는 flexbox 유틸리티를 사용하여 내용을 세로로 가운데에 맞추고 열이 필요한 만큼만 공간을 차지하도록 변경 .col합니다 . .col-auto즉, 열은 내용에 따라 자체적으로 크기를 조정합니다.

@ 
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

그런 다음 크기별 열 클래스로 다시 한 번 리믹스할 수 있습니다.

@ 
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

인라인 양식

클래스를 사용 .row-cols-*하여 반응형 수평 레이아웃을 만듭니다. 거터 수정자 클래스 를 추가하여 수평 및 수직 방향의 거터를 갖게 됩니다. 좁은 모바일 뷰포트 .col-12에서 양식 컨트롤 등을 쌓는 데 도움이 됩니다. .align-items-center양식 요소를 가운데에 정렬 하여 .form-checkbox제대로 정렬합니다.

@ 
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>