Bootstrap의 양식 컨트롤에 대해 자세히 알아보기

이 글에서는 Bootstrap의 양식 컨트롤에 대해 자세히 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

기본 인스턴스

---

개별 양식 컨트롤에는 일부 전역 스타일이 자동으로 할당됩니다. .form-control 클래스로 설정된 모든 , 요소는 기본적으로 width: 100%로 설정됩니다. label 요소와 앞서 언급한 컨트롤을 .form-group으로 래핑하면 최상의 배열이 됩니다.

양식 그룹과 입력 상자 그룹을 혼합하지 마세요. 입력 상자 그룹을 양식 그룹에 중첩하는 것이 좋습니다.

관련 권장사항: "

bootstrap tutorial

"

Inline form

<form></form> 요소에 .form-inline 클래스를 추가하세요. 활성화 해당 콘텐츠는 왼쪽 정렬되고 인라인 블록 수준 컨트롤로 작동합니다.

---

뷰포트 너비가 768px 이상인 경우에만 적용됩니다(뷰포트 너비가 더 작으면 양식이 축소됩니다).

元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

可能需要手动设置宽度

在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些

元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些

额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为

label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，

比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用

placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

水平排列的表单

---

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="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">Sign in</button>
    </div>
  </div>
</form>

被支持的控件

---

表单布局实例中展示了其所支持的标准表单控件。

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

必须添加类型声明

只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

输入控件组

如需在文本输入域 前面或后面添加文本内容或按钮控件，请参考输入控件组。

文本域

支持多行文本的表单控件。可根据需要改变 rows

너비를 수동으로 설정해야 할 수도 있습니다

Bootstrap에서 입력 상자와 라디오/다중 선택 상자 컨트롤은 기본적으로 너비: 100%로 설정됩니다. 인라인 형식에서는 이러한 🎜🎜 요소의 너비를 width: auto;로 설정하므로 여러 컨트롤을 같은 줄에 정렬할 수 있습니다. 레이아웃 요구 사항에 따라 일부 🎜🎜 추가 맞춤 구성 요소가 필요할 수 있습니다. 🎜

🎜레이블 태그를 꼭 추가하세요🎜🎜각 입력 컨트롤에 레이블 레이블을 설정하지 않으면 스크린 리더가 이를 올바르게 인식하지 못합니다. 이러한 인라인 양식의 경우 🎜🎜레이블에 .sr 전용 클래스를 설정하여 숨길 수 있습니다. aria-label, aria-labelledby 또는 제목 속성과 같은 라벨 태그에 대한 대안을 제공하는 보조 기술도 있습니다. 이들 중 어느 것도 없으면 화면 판독기는 🎜🎜placeholder 속성을 사용하고, 있는 경우 다른 마크업 대신 자리 표시자를 사용할 수 있지만 이 접근 방식은 부적절하다는 점에 유의하세요. 🎜

🎜🎜

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

🎜🎜

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

🎜🎜

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

🎜 🎜가로로 정렬된 양식🎜🎜🎜🎜🎜양식에 .form-horizontal 클래스를 추가하고 Bootstrap의 미리 설정된 그리드 클래스를 사용하면 label 레이블과 그룹을 결합할 수 있습니다 컨트롤은 수평으로 나란히 배치됩니다. 이렇게 하면 .form-group의 동작이 변경되어 그리드 시스템에서 행처럼 작동하므로 .row를 추가할 필요가 없습니다. 🎜🎜🎜🎜rrreee 🎜🎜지원되는 컨트롤🎜🎜🎜🎜🎜양식 레이아웃 예제는 지원하는 표준 양식 컨트롤을 보여줍니다. 🎜🎜🎜🎜🎜입력 상자🎜🎜🎜대부분의 양식 컨트롤, 텍스트 입력 필드 컨트롤을 포함하고 모든 HTML5 유형 입력 컨트롤도 지원합니다: 텍스트 , 비밀번호, 날짜시간, 날짜시간-로컬, 날짜, 월 코드>, 시간, 주, 번호, 이메일, url, 검색, 전화 및 색상. 🎜

🎜Type 선언을 추가해야 합니다.🎜🎜type 속성이 올바르게 설정된 입력 컨트롤에만 올바른 스타일을 지정할 수 있습니다. 🎜

🎜🎜

🎜입력 제어 그룹🎜🎜텍스트 입력 필드 전후에 텍스트 내용이나 버튼 제어를 추가해야 하는 경우 입력 제어 그룹을 참조하세요. 🎜

🎜🎜텍스트 필드🎜🎜🎜 여러 줄의 텍스트를 지원하는 양식 컨트롤입니다. 필요에 따라 rows 속성을 ​​변경할 수 있습니다. 🎜🎜🎜🎜

多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label></label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it&#39;s great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

不带label文本的Checkbox 和 radio

如果需要 <label></label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。 请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label)

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

更多编程相关知识，请访问：编程视频！！

위 내용은 Bootstrap의 양식 컨트롤에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!