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>

ログイン後にコピー

入力グループと入力グループテキスト

これこの手法では、アイコンの入力グループテキストを持つ入力グループを利用します。 input-group-text は、灰色の背景のないアイコンのプレースホルダーを提供します。

<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>

ログイン後にコピー

グリッドシステム (行および列)

この手法では、グリッドシステム (行と列) を使用して、アイコン付きの検索入力を作成します。列間の間隔をなくすためにガターなしが使用され、シームレスなレイアウトが得られます。

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

ログイン後にコピー

<button>

ログイン後にコピー

入力グループPrepend

append を備えた入力グループと同様に、この手法は input-group-prepend を備えた入力グループを利用します。アイコンは入力フィールドの前の先頭に配置されます。

<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>

ログイン後にコピー