首頁 > web前端 > css教學 > 如何在 Bootstrap 4 中的搜尋輸入中新增圖示?

如何在 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 不支援 Glyphicons。以下是如何使用各種技術將圖示合併到搜尋輸入中的詳細說明:

帶有附加的輸入組

此技術使用帶有圖示附加或前綴的輸入群組。圖示放置在輸入欄位之前或之後。

<br><div> <input class="form-control py-2" type="搜尋」值=「搜尋」> <span><pre class="brush:php;toolbar:false"><button>



帶有輸入群組文字的輸入群組

;

此技術利用一個輸入組圖示的輸入組文字。 input-group-text 為沒有灰色背景的圖示提供佔位符。

<br><div> <input class=" form-control py- border-right-0 value="search"> <span><pre class="brush:php;toolbar:false"><div>
登入後複製



網格系統(行和列)

此技術使用網格系統(行和列)建立帶有圖示的搜尋輸入。無裝訂線用於消除列之間的間距,從而實現無縫佈局。

<br><div> <div class="col">
<pre class="brush:php;toolbar:false"><input>
登入後複製


<button>
登入後複製
登入後複製



帶前綴的輸入組

與有append的輸入組類似,這個技術利用輸入組前置的輸入組。圖示放置在前綴中,位於輸入欄位之前。

<br><div> <span class="input-group-prepend"> <pre class="brush:php;toolbar:false"><div>
登入後複製


<button>
登入後複製
登入後複製



的選擇技術取決於所需的外觀和功能。這些範例示範了使用 Bootstrap 4 將圖示整合到搜尋輸入中的幾種方法,從而提供了設計和實現的靈活性。

以上是如何在 Bootstrap 4 中的搜尋輸入中新增圖示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
上一篇:如何使用 jQuery 高效能取得隱藏 Div 內元素的高度? 下一篇:訪問具有漸變效果的 CSS 動畫!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪? 課件
來自於 2024-04-16 10:10:18
0
0
1912
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板