ホームページ >ウェブフロントエンド >CSSチュートリアル >Bootstrap 4 の検索入力にアイコンを追加するにはどうすればよいですか?

Bootstrap 4 の検索入力にアイコンを追加するにはどうすればよいですか?

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>

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

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

<br><div> <input class="form-control py- 2 border-right-0 border" type="search" value="search"> <span><pre class="brush:php;toolbar:false"><div>

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

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

<button>

入力グループPrepend

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

どの技術を選択するかは、求められる外観と機能によって異なります。これらの例は、Bootstrap 4 を使用してアイコンを検索入力に統合し、設計と実装に柔軟性をもたらすいくつかの方法を示しています。

以上がBootstrap 4 の検索入力にアイコンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。