Bootstrap 입력 상자 그룹 기능 소개

이 장에서는 Bootstrap에서 지원하는 또 다른 기능인 입력 상자 그룹에 대해 설명합니다. 입력 상자 그룹은 양식 컨트롤에서 확장됩니다. 입력 상자 그룹을 사용하면 텍스트 기반 입력 상자에 접두사 및 접미사로 텍스트나 버튼을 쉽게 추가할 수 있습니다.

입력 필드에 접두사 및 접미사 콘텐츠를 추가하여 사용자 입력에 공통 요소를 추가할 수 있습니다. 예를 들어, Twitter 사용자 이름 앞에 달러 기호나 @를 추가하거나 애플리케이션 인터페이스에 필요한 기타 공통 요소를 추가할 수 있습니다.

.form-control에 접두사 또는 접미사 요소를 추가하는 단계는 다음과 같습니다.

클래스 .input-group을 사용하여

에 접두사 또는 접미사 요소를 넣습니다.

다음으로, 동일한

내에서 .input-group-addon 클래스의 내에 추가 콘텐츠를 배치합니다.

<input> 요소 앞이나 뒤에 을 배치하세요.

브라우저 간 호환성을 유지하려면 WebKit 브라우저에서 완전히 렌더링되지 않는 요소를 사용하지 마세요. 입력 상자 그룹의 클래스를 양식 그룹에 직접 적용하지 마십시오. 입력 상자 그룹은 격리된 구성 요소입니다.

이전 단어

때로는 텍스트 입력 상자(입력 그룹)를 파일이나 표시용 작은 아이콘(애드온이라고 함)과 결합해야 할 때가 있습니다. 즉, 텍스트 입력 상자 <input>의 앞, 뒤 또는 양쪽에 텍스트나 버튼을 추가하여 폼 컨트롤을 확장할 수 있습니다. 이 글에서는 부트스트랩 입력 상자 그룹을 자세히 소개합니다<input> 前面、后面或是两边加上文字或按钮，来实现对表单控件的扩展。本文将详细介绍Bootstrap输入框组

基本用法

　　在输入框的任意一侧添加额外元素或按钮。还可以在输入框的两侧同时添加额外元素

<div>
  <span>@</span>
  <input>
</div><div>
  <input>
  <span>@example.com</span>
</div><div>
  <span>$</span>
  <input>
  <span>.00</span>
</div><div>
  <span></span>
  <input>
</div>

【注意事项】

　　1、避免使用 <select></select> 元素，因为 WebKit 浏览器不能完全绘制它的样式

　　2、避免使用 <textarea></textarea> 元素，由于它们的 rows 属性在某些情况下不被支持

　　3、不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部 

<h3 id="错误示范">错误示范</h3><div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div><h3 id="正确示范">正确示范</h3><div><div>  <span>@</span>  <input>
</div></div><div><div>  <span>@</span>  <input>
</div></div>

　　4、可以添加多个（.input-group-addon 或 .input-group-btn）

<div>
  <span>@</span>
  <span>@</span>    
  <input>
  <span>@</span>
</div>

　　5、不支持在单个输入框组中添加多个表单控件

<div>
  <span>@</span>
  <input>
  <input>
</div>

 

尺寸

　　为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。提供了.input-group-lg和.input-group-sm，未提供超小型的样式，也许作者认为不需要

<div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div><div>
  <span>@</span>
  <input>
</div>

 

额外元素

【多选框或单选框】 

　　可以将多选框或单选框作为额外元素添加到输入框组中

<div>
  <span><input>
  </span>
  <input>
</div><div>
  <span><input>
  </span>
  <input>
</div>

【按钮】

　　为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn

기본 사용법

　 입력 상자 양쪽에 추가 요소나 버튼을 추가합니다. 입력 상자 양쪽에 동시에 추가 요소를 추가할 수도 있습니다

<div>
  <span><button>Go!</button>
  </span>
  <input>
</div>

브라우저가 스타일을 완전히 그릴 수 없습니다

　2. 일부 경우 rows 속성이 지원되지 않으므로 <textarea></textarea> 요소를 사용하지 마세요

　3. 양식을 그룹화하지 마세요 또는 래스터 열(column) 클래스가 입력 상자 그룹과 직접 혼합됩니다. 대신 입력 상자 그룹은 양식 그룹 또는 그리드 관련 요소

<div>
 <div>
<button>Action <span></span></button><ul>  <li><a>Action</a></li>  <li><a>Another action</a></li>  <li><a>Something else here</a></li>  <li>  <li><a>Separated link</a></li>
</ul>
  </div>
  <input>
</div>

　　4 내에 중첩됩니다. 여러 개를 추가할 수 있습니다(.input-group - 애드온 또는 .input-group-btn)

<div>
 <div> <button>Action</button><button><span></span></button><ul>  <li><a>Action</a></li>  <li><a>Another action</a></li>  <li><a>Something else here</a></li>  <li>  <li><a>Separated link</a></li>
</ul>
  </div>
  <input>
</div>

🎜🎜　　5. 는 단일 입력을 지원하지 않습니다. 상자 그룹에 여러 양식 컨트롤🎜🎜rrreee🎜🎜🎜🎜🎜 🎜

Size

🎜　포함된 요소 내부의 .input-group에 해당 크기 클래스를 추가합니다. 자동으로 크기가 조정됩니다. 입력 상자 그룹의 각 요소에 대해 크기 조정 클래스를 반복적으로 추가할 필요가 없습니다. .input-group-lg 및 .input-group-sm은 제공되지만 초소형 스타일은 제공되지 않습니다. 작성자가 필요하지 않다고 생각했을 수도 있습니다🎜🎜rrreee🎜🎜🎜🎜🎜🎜

추가 요소

🎜【다중 선택 상자 또는 라디오 버튼] 🎜🎜 입력 상자 그룹에 다중 선택 상자 또는 라디오 버튼을 추가 요소로 추가할 수 있습니다. 🎜🎜rrreee🎜🎜🎜🎜🎜【버튼】🎜🎜 입력 상자 그룹에는 추가 레이어를 추가해야 합니다. 중첩하려면 .input-group-addon 대신 .input-group-btn을 추가하여 버튼 요소를 래핑하세요. .btn 버튼 스타일은 다양한 스타일을 정의하므로 .input-group-addon 스타일에 직접 배치할 수 있는 체크박스, 라디오, 라벨 등과는 다릅니다. 따라서 충돌을 피하기 위해 작성자는 .btn 스타일에 대해 별도의 .input-group-btn 스타일을 설정하여 .input-group-addon을 새로운 애드온 컨테이너로 대체했습니다🎜🎜rrreee🎜🎜🎜🎜🎜[버튼 드롭 -down Menu】🎜🎜 버튼을 지원할 수 있다면 당연히 버튼형 드롭다운 메뉴도 지원할 수 있습니다. 추가 스타일 지원은 필요하지 않습니다. 일반 .btn 버튼🎜🎜 rrreee🎜🎜🎜🎜🎜【분할 버튼 드롭다운 메뉴】🎜🎜rrreee🎜🎜🎜🎜🎜🎜

위 내용은 Bootstrap 입력 상자 그룹 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!