Bootstrap에서 아이콘을 사용하여 검색 입력 스타일을 지정하는 방법은 무엇입니까?

Bootstrap에서 아이콘을 사용하여 검색 입력 스타일 지정

Bootstrap 4에서는 글리피콘에 대한 지원이 제거되었지만 아이콘을 검색 입력에 통합하는 방법은 여전히 ​​있습니다. . 다음은 몇 가지 접근 방식입니다.

입력 그룹 사용:

• Bootstrap 5:

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

• 부트스트랩 4:

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

입력 내부에 아이콘 배치:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

입력 그룹 텍스트 사용 배경:

<input class="form-control py-2 border-right-0 border" type="search" value="search">

기타 옵션:

• 그리드 시스템:

<div class="row no-gutters">
  <div class="col">
    <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">

• 앞에 추가 아이콘:

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="...">

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