この質問には、Bootstrap 4 の検索入力にアイコンを統合することが含まれています。この問題は、Bootstrap 4 が Glyphicon をサポートしていないために発生します。ここでは、さまざまな手法を使用して検索入力にアイコンを組み込む方法について詳しく説明します。
この手法では、アイコンの追加または先頭を含む入力グループ。アイコンは入力フィールドの前または後に配置されます。
1 |
|
これこの手法では、アイコンの入力グループ テキストを持つ入力グループを利用します。 input-group-text は、灰色の背景のないアイコンのプレースホルダーを提供します。
1 |
|
この手法では、グリッド システム (行と列) を使用して、アイコン付きの検索入力を作成します。列間の間隔をなくすためにガターなしが使用され、シームレスなレイアウトが得られます。
1 2 |
|
1 |
|
append を備えた入力グループと同様に、この手法は input-group-prepend を備えた入力グループを利用します。アイコンは入力フィールドの前の先頭に配置されます。
1 2 |
|
1 |
|
どの技術を選択するかは、求められる外観と機能によって異なります。これらの例は、Bootstrap 4 を使用してアイコンを検索入力に統合し、設計と実装に柔軟性をもたらすいくつかの方法を示しています。
以上がBootstrap 4 の検索入力にアイコンを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。