내에 추가 콘텐츠를 배치합니다.
<input> 요소 앞이나 뒤에 을 배치하세요.
브라우저 간 호환성을 유지하려면 WebKit 브라우저에서 완전히 렌더링되지 않는 <select> 요소를 사용하지 마세요. 입력 상자 그룹의 클래스를 양식 그룹에 직접 적용하지 마십시오. 입력 상자 그룹은 격리된 구성 요소입니다.
이전 단어
때로는 텍스트 입력 상자(입력 그룹)를 파일이나 표시용 작은 아이콘(애드온이라고 함)과 결합해야 할 때가 있습니다. 즉, 텍스트 입력 상자 <input>의 앞, 뒤 또는 양쪽에 텍스트나 버튼을 추가하여 폼 컨트롤을 확장할 수 있습니다. 이 글에서는 부트스트랩 입력 상자 그룹을 자세히 소개합니다<input> 前面、后面或是两边加上文字或按钮，来实现对表单控件的扩展。本文将详细介绍Bootstrap输入框组
基本用法
在输入框的任意一侧添加额外元素或按钮。还可以在输入框的两侧同时添加额外元素
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span></div><div class="input-group">
<span class="input-group-addon" id="basic-addon3"></span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>
로그인 후 복사
【注意事项】
1、避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式
2、避免使用 <textarea> 元素，由于它们的 rows 属性在某些情况下不被支持
3、不要将表单组或栅格列（column）类直接和输入框组混合使用。而是将输入框组嵌套到表单组或栅格相关元素的内部
<h3>错误示范</h3><div class="input-group col-xs-4">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group col-xs-8">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div><div class="col-xs-8"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div>
로그인 후 복사
4、可以添加多个（.input-group-addon 或 .input-group-btn）
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1">@</span></div>
로그인 후 복사
5、不支持在单个输入框组中添加多个表单控件
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
로그인 후 복사
尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。提供了.input-group-lg和.input-group-sm，未提供超小型的样式，也许作者认为不需要
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
로그인 후 복사
额外元素
【多选框或单选框】
可以将多选框或单选框作为额外元素添加到输入框组中
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="..."></div><div class="input-group">
<span class="input-group-addon"><input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="..."></div>
로그인 후 복사
【按钮】
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn
기본 사용법
입력 상자 양쪽에 추가 요소나 버튼을 추가합니다. 입력 상자 양쪽에 동시에 추가 요소를 추가할 수도 있습니다
<div class="input-group">
<span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for..."></div>
로그인 후 복사
브라우저가 스타일을 완전히 그릴 수 없습니다 2. 일부 경우 rows 속성이 지원되지 않으므로 <textarea> 요소를 사용하지 마세요 3. 양식을 그룹화하지 마세요 또는 래스터 열(column) 클래스가 입력 상자 그룹과 직접 혼합됩니다. 대신 입력 상자 그룹은 양식 그룹 또는 그리드 관련 요소
<div class="input-group">
<div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul>
</div>
<input type="text" class="form-control" aria-label="..."></div>
로그인 후 복사
.input-group - 애드온 또는 .input-group-btn)
<div class="input-group">
<div class="input-group-btn"> <button class="btn btn-default" type="button">Action</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul>
</div>
<input type="text" class="form-control" aria-label="..."></div>
로그인 후 복사
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
