Bootstrap을 사용하여 검색 입력 필드에 아이콘을 추가하는 방법은 무엇입니까?

아이콘 Bootstrap을 사용한 검색 입력 필드

Bootstrap 5 이상의 현대 시대에는 검색 입력 필드를 아이콘으로 사용자 정의하는 것이 매우 쉬워졌습니다. . 검색 입력에 아이콘을 통합하는 두 가지 기본 접근 방식을 살펴보겠습니다.

Bootstrap 5 베타

Bootstrap 5는 다음과 원활하게 통합되는 입력 그룹 클래스를 제공합니다. 입력 필드. 사용 방법은 다음과 같습니다.

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4(원래 답변)

Bootstrap 4로 작업하는 경우 입력 그룹 클래스 사용을 고려하세요. 또한:

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Bootstrap 4의 추가 옵션:

• 테두리 조작: border-right와 같은 Bootstrap 유틸리티 클래스를 사용하세요. -0 또는 border-left-0은 아이콘이 필드 내부에 떠 있는 것처럼 보이는 입력을 생성합니다.
• 입력 그룹 텍스트: 동일한 결과를 얻으려면 투명한 배경의 입력 그룹 텍스트를 활용하세요. 효과.
• 그리드 시스템: 여백 없이 그리드 시스템(행 및 열)을 활용하여 입력과 아이콘 사이의 원활한 전환을 만듭니다.

위 내용은 Bootstrap을 사용하여 검색 입력 필드에 아이콘을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!