Bootstrap 입력 상자 그룹 기능 소개
- 零下一度원래의
- 2017-07-17 14:38:072043검색
이 장에서는 Bootstrap에서 지원하는 또 다른 기능인 입력 상자 그룹에 대해 설명합니다. 입력 상자 그룹은 양식 컨트롤에서 확장됩니다. 입력 상자 그룹을 사용하면 텍스트 기반 입력 상자에 접두사 및 접미사로 텍스트나 버튼을 쉽게 추가할 수 있습니다.
입력 필드에 접두사 및 접미사 콘텐츠를 추가하여 사용자 입력에 공통 요소를 추가할 수 있습니다. 예를 들어, Twitter 사용자 이름 앞에 달러 기호나 @를 추가하거나 애플리케이션 인터페이스에 필요한 기타 공통 요소를 추가할 수 있습니다.
.form-control에 접두사 또는 접미사 요소를 추가하는 단계는 다음과 같습니다.
클래스 .input-group을 사용하여
에 접두사 또는 접미사 요소를 넣습니다.
다음으로, 동일한
내에서 .input-group-addon 클래스의 내에 추가 콘텐츠를 배치합니다.
<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>4 내에 중첩됩니다. 여러 개를 추가할 수 있습니다(
.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>🎜🎜 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：페이지 내 점프를 위한 앵커 설정다음 기사：페이지 내 점프를 위한 앵커 설정