Bootstrap 5 입력 그룹

输入组

.input-group 类是一种容器，通过在输入字段的前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入。

如需设置指定帮助文本的样式，请使用 .input-group-text 类：

예제

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="사용자 이름">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="您的电邮">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

직접 시험해 보세요

입력 그룹 크기

다음을 입력하십시오： .input-group-sm 클래스는 소형 입력 그룹에 사용되며, .input-group-lg 대형 입력 그룹에 사용됩니다：

예제

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">소형</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">기본</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">대형</span>
  <input type="text" class="form-control">
</div>

직접 시험해 보세요

여러 입력과 도구

여러 입력 컨트롤이나 플러그인을 추가하세요：

예제

<!-- 여러 입력 컨트롤 -->
<div class="input-group mb-3">
  <span class="input-group-text">이름</span>
  <input type="text" class="form-control" placeholder="성">
  <input type="text" class="form-control" placeholder="이름">
</div>
<!-- 여러 플러그인/도움말 텍스트 -->
<div class="input-group mb-3">
  <span class="input-group-text">일</span>
  <span class="input-group-text">이</span>
  <span class="input-group-text">삼</span>
  <input type="text" class="form-control">
</div>

직접 시험해 보세요

체크박스와 단일 선택 버튼이 포함된 입력 그룹

문자 대신 체크박스나 단일 선택 버튼을 사용할 수 있습니다：

예제

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="일부 텍스트">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="일부 텍스트">
</div>

직접 시험해 보세요

입력 그룹 버튼

예제

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">기본 버튼</button>
  <input type="text" class="form-control" placeholder="일부 텍스트">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="검색">
  <button class="btn btn-success" type="submit">가기</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="일부 텍스트">
  <button class="btn btn-primary" type="button">확인</button>
  <button class="btn btn-danger" type="button">취소</button>
</div>

직접 시험해 보세요

下拉 버튼이 들어간 입력 그룹

입력 그룹에下拉 버튼을 추가하세요. 주의하세요, 일반적으로 .dropdown 래퍼 패키지 컨테이너와 같이 사용하지 않아도 됩니다.

예제

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    下拉 버튼
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">링크 1</a></li>
    <li><a class="dropdown-item" href="#">링크 2</a></li>
    <li><a class="dropdown-item" href="#">링크 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="사용자 이름">
</div>

직접 시험해 보세요