여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 입력 그룹
Bootstrap – Bootstrap 4 입력 그룹
5개월전 작성
6개월전 수정



부트스트랩 4 입력 그룹

.input-group 클래스는 입력 필드 앞이나 뒤에 “도움말 텍스트”로 아이콘, 텍스트 또는 버튼을 추가하여 입력을 향상시키는 컨테이너다.

.input-group-prepend는 입력 앞에 도움말 텍스트를 추가하고 .input-group-append는 입력 뒤에 추가하는 데 사용한다.

마지막으로 지정된 도움말 텍스트의 스타일을 지정하는 .input-group-text 클래스를 추가한다.

@

@example.com
예제
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Your Email">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</form>
기본 예시
예제 보기

입력 그룹 크기 조정

소규모 입력 그룹에 .input-group-sm 클래스, 대규모 입력 그룹에 .input-group-lg 클래스를 사용한다.

예제
<form>
  <div class="input-group mb-3 input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Default</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3 input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
기본 예시
예제 보기

다중 입력 및 도우미

예제
<!-- Multiple inputs -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Person</span>
    </div>
    <input type="text" class="form-control" placeholder="First Name">
    <input type="text" class="form-control" placeholder="Last Name">
  </div>
</form>

<!-- Multiple addons / help text -->
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
기본 예시
예제 보기

체크박스와 라디오가 있는 입력 그룹

텍스트 대신 체크박스나 라디오 버튼을 사용할 수도 있다.

예제
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>
기본 예시
예제 보기

입력 그룹 버튼

예제
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">Basic Button</button>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-success" type="submit">Go</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button>
    <button class="btn btn-danger" type="button">Cancel</button>
  </div>
</div>
기본 예시
예제 보기

드롭다운 버튼이 있는 입력 그룹

입력 그룹에 드롭다운 버튼을 추가한다.
평소처럼 .dropdown 래퍼가 필요하지 않다.

예제
<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>
기본 예시
예제 보기

입력 그룹 레이블

입력 그룹 외부에 레이블을 배치하고 for 속성 값이 입력 ID와 일치해야 한다는 점을 기억하자.

레이블을 클릭하면 입력에 초점이 맞춰진다.

예제
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그