목차
- Input Group 구문
- Input Group 크기
- 여러 Input / Helper
- Checkbox/Radio 있는 Input Group
- Input Group 버튼
- Dropdown Button 있는 Input Group
Input Group 구문
.input-group 클래스
- (INPUT 필드 + INPUT 필드 설명 텍스트나 이미지)을 감싸는 요소에 추가
.input-group-text 클래스
- INPUT 필드 설명 텍스트나 이미지를 꾸미는 스타일
- INPUT 필드 앞이나 뒤에 추가 가능.
[예제]
<form action="/action_page.php">
<div class="input-group mb-3">
<span class="input-group-text">이름</span>
<input type="text" class="form-control" placeholder="이름 입력" name="name">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email 입력" name="email">
<span class="input-group-text">(예)</span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Input Group 크기
.input-group 클래스 옆에 아래 클래스 추가.
- .input-group-sm 클래스 : 작은 INPUT 그룹
- .input-group-lg 클래스 : 큰 INPUT 그룹
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Small INPUT</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">기본 INPUT</span>
<input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
<span class="input-group-text">Large INPUT</span>
<input type="text" class="form-control">
</div>
여러 Input / Helper
<!-- 여러 INPUT -->
<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>
<!-- 여러 Helper -->
<div class="input-group mb-3">
<span class="input-group-text">HTML</span>
<span class="input-group-text">CSS</span>
<span class="input-group-text">JS</span>
<input type="text" class="form-control">
</div>
Checkbox/Radio 있는 Input Group
※ Checkbox / Radio 버튼 역시 Text Helper 대신 사용 가능.
<!-- Checkbox Helper -->
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="text 입력">
</div>
<!-- Radio Helper -->
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="text 입력">
</div>
Input Group 버튼
※ .input-group 클래스 안에 BUTTON 추가 가능.
<!-- INPUT 앞에 BUTTON 추가 -->
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">기본 Button</button>
<input type="text" class="form-control" placeholder="Some text">
</div>
<!-- INPUT 뒤에 BUTTON 추가 -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="검색어 입력">
<button class="btn btn-success" type="submit">Go</button>
</div>
<-- INPUT 뒤에 BUTTON 2개 추가 -->
<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 Button 있는 Input Group
※ .input-group 안에 드롭다운 메뉴 추가 시, .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="name 입력">
</div>