이 장에서는 Bootstrap에서 지원하는 또 다른 기능인 입력 상자 그룹에 대해 설명합니다. 입력 상자 그룹은 양식 컨트롤에서 확장됩니다. 입력 상자 그룹을 사용하면 텍스트 기반 입력 상자에 접두사 및 접미사로 텍스트나 버튼을 쉽게 추가할 수 있습니다.
입력 필드에 접두사 및 접미사 콘텐츠를 추가하여 사용자 입력에 공통 요소를 추가할 수 있습니다. 예를 들어, Twitter 사용자 이름 앞에 달러 기호나 @를 추가하거나 애플리케이션 인터페이스에 필요한 기타 공통 요소를 추가할 수 있습니다.
.form-control에 접두사 또는 접미사 요소를 추가하는 단계는 다음과 같습니다.
클래스 .input-group을 사용하여
다음으로, 동일한
<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>
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>
.input-group에 해당 크기 클래스를 추가합니다. 자동으로 크기가 조정됩니다. 입력 상자 그룹의 각 요소에 대해 크기 조정 클래스를 반복적으로 추가할 필요가 없습니다. .input-group-lg 및 .input-group-sm은 제공되지만 초소형 스타일은 제공되지 않습니다. 작성자가 필요하지 않다고 생각했을 수도 있습니다🎜🎜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)
