Bootstrap 4의 검색 입력에 아이콘을 추가하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-12-15 17:13:14

원래의

591명이 탐색했습니다.

How to add an icon to a search input in Bootstrap 4?

Bootstrap 4 - 아이콘이 있는 검색 입력

문제는 아이콘을 Bootstrap 4 검색 입력에 통합하는 것과 관련됩니다. Bootstrap 4가 Glyphicon을 지원하지 않기 때문에 문제가 발생합니다. 다음은 다양한 기술을 사용하여 검색 입력에 아이콘을 통합하는 방법에 대한 자세한 설명입니다.

추가가 있는 그룹 입력>

이 기술은 아이콘 앞에 추가 또는 추가가 있는 입력 그룹입니다. 아이콘은 입력 필드 앞이나 뒤에 배치됩니다.

<br><div> <input class="form-control py-2" type=" 검색" 값="검색"> <span><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>

로그인 후 복사

입력 그룹 텍스트가 있는 그룹 입력 ;

이 기술은 다음과 같은 입력 그룹을 활용합니다. 아이콘에 대한 입력 그룹 텍스트입니다. 입력 그룹 텍스트는 회색 배경이 없는 아이콘에 대한 자리 표시자를 제공합니다.

<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

로그인 후 복사

그리드 시스템(행 및 열)< /h3>

이 기술은 그리드 시스템을 사용합니다. (행 및 열) 아이콘이 있는 검색 입력을 생성합니다. 열 사이의 간격을 없애기 위해 여백 없음을 사용하여 원활한 레이아웃을 구현했습니다.

<br><div> <div class="col"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><input>

로그인 후 복사

<button>

로그인 후 복사

앞에 추가가 있는 입력 그룹

입력 그룹과 유사 추가를 사용하는 경우 이 기술은 입력 그룹 앞에 입력 그룹을 활용합니다. 아이콘은 입력 필드 앞에 있는 앞에 추가됩니다.

<br><div> <span class="input-group-prepend"> </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

로그인 후 복사

<입력>