Bootstrap 4의 검색 입력에 아이콘을 추가하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

Linda Hamilton

Dec 15, 2024 pm 05:13 PM

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><pre class="brush:php;toolbar:false"><button></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><p><br></p></div><br>

그리드 시스템(행 및 열)

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

<br><div> <div class="col">
<pre class="brush:php;toolbar:false"><input>

<button></button>

앞에 추가가 있는 입력 그룹

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


  

  
<button></button>




선택 기술은 원하는 모양과 기능에 따라 다릅니다. 이 예는 Bootstrap 4를 사용하여 아이콘을 검색 입력에 통합하여 디자인 및 구현에 유연성을 제공하는 여러 방법을 보여줍니다.

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

두 개의 이미지와 API : 제품을 다시 칠하는 데 필요한 모든 것Apr 15, 2025 am 11:27 AM

최근에 제품 이미지의 색상을 동적으로 업데이트하는 솔루션을 찾았습니다. 따라서 제품 중 하나만 사용하여 다른 방식으로 색칠 할 수 있습니다.

주간 플랫폼 뉴스 : 제 3 자 코드, 수동 혼합 콘텐츠, 가장 느린 연결이있는 국가의 영향Apr 15, 2025 am 11:19 AM

이번 주에 라운드 업, Lighthouse는 타사 스크립트에 빛을 비추고 불안한 자원이 안전한 사이트에서 차단되고 많은 국가 연결 속도가 차단됩니다.

직접 비자 스크립트 기반 분석을 호스팅하는 옵션Apr 15, 2025 am 11:09 AM

사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석

그것은 모두 헤드에있는 모든 것 : React Helmet과 함께 React 전원 사이트의 문서 헤드 관리Apr 15, 2025 am 11:01 AM

문서 헤드는 웹 사이트에서 가장 화려한 부분이 아닐 수도 있지만 웹 사이트의 성공에 중요합니다.

JavaScript의 Super () 란 무엇입니까?Apr 15, 2025 am 10:59 AM

Super ()?를 호출하는 JavaScript를 볼 때 어떤 일이 발생 하는가. 아동 클래스에서는 Super ()를 사용하여 부모의 생성자와 Super를 호출합니다. 그것의 접근

다양한 유형의 기본 JavaScript 팝업 비교Apr 15, 2025 am 10:48 AM

JavaScript에는 사용자 상호 작용을위한 특수 UI를 표시하는 다양한 내장 팝업 API가 있습니다. 뛰어나게:

액세스 가능한 웹 사이트를 구축하기가 어려운 이유는 무엇입니까?Apr 15, 2025 am 10:45 AM

나는 다른 날에 많은 회사들이 액세스 가능한 웹 사이트를 만드는 데 어려움을 겪고있는 이유에 대해 다른 프론트 엔드 사람들과 대화를 나누고있었습니다. 액세스 가능한 웹 사이트가 왜 그렇게 어려운가

'숨겨진'속성은 눈에 띄게 약합니다Apr 15, 2025 am 10:43 AM

당신이해야 할 일을 정확하게 수행하는 HTML 속성이 있습니다.

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.