Bootstrap 4의 검색 입력에 아이콘을 추가하는 방법은 무엇입니까?
- Linda Hamilton원래의
- 2024-12-15 17:13:14597검색
Bootstrap 4 - 아이콘이 있는 검색 입력
문제는 아이콘을 Bootstrap 4 검색 입력에 통합하는 것과 관련됩니다. Bootstrap 4가 Glyphicon을 지원하지 않기 때문에 문제가 발생합니다. 다음은 다양한 기술을 사용하여 검색 입력에 아이콘을 통합하는 방법에 대한 자세한 설명입니다.
추가가 있는 그룹 입력>
이 기술은 아이콘 앞에 추가 또는 추가가 있는 입력 그룹입니다. 아이콘은 입력 필드 앞이나 뒤에 배치됩니다.
<br><div> <input class="form-control py-2" type=" 검색" 값="검색"> <span><pre class="brush:php;toolbar:false"><button>
입력 그룹 텍스트가 있는 그룹 입력 ;
이 기술은 다음과 같은 입력 그룹을 활용합니다. 아이콘에 대한 입력 그룹 텍스트입니다. 입력 그룹 텍스트는 회색 배경이 없는 아이콘에 대한 자리 표시자를 제공합니다.
<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><pre class="brush:php;toolbar:false"><div>
그리드 시스템(행 및 열)< /h3>
이 기술은 그리드 시스템을 사용합니다. (행 및 열) 아이콘이 있는 검색 입력을 생성합니다. 열 사이의 간격을 없애기 위해 여백 없음을 사용하여 원활한 레이아웃을 구현했습니다.
<br><div> <div class="col"></p> <pre class="brush:php;toolbar:false"><input>
<button>