ブートストラップの検索ボックスの実行方法

Bootstrapを使用して検索ボックスを作成するには：type = "Search"で入力ボックスを作成します。入力ボックスにフォームコントロールクラスを追加します。オプション：検索ボタンを追加します。オプション：入力グループと入力グループLGまたは入力グループ-SMを使用して、入力ボックスをサイズ変更します。オプション：プレースホルダープロパティを使用して、プレースホルダーテキストを追加します。オプション：テキスト左、テキスト中心、またはテキスト右クラスを使用して、入力ボックステキストのアラインメントを設定します。

Bootstrapを使用して検索ボックスを作成します

ブートストラップを使用して検索ボックスを作成する方法は？

ブートストラップを使用して検索ボックスを作成する手順は次のとおりです。

1.基本的な入力ボックスを作成します

HTMLでは、 <input>要素を使用して入力ボックスを作成し、 type="search"属性を追加して、検索ボックスとして指定します。

 <code class="html"><input type="search"></code>

2。入力ボックスのスタイル

ブートストラップスタイルを使用するには、 form-controlクラスを入力ボックスに追加します。

 <code class="html"><input type="search" class="form-control"></code>

3.ボタンを追加（オプション）

入力ボックスの後に<button></button>要素を追加すると、検索ボタンを追加できます。

 <code class="html"><input type="search" class="form-control"> <button type="submit" class="btn btn-primary">搜索</button></code>

4。入力ボックスのサイズ（オプション）

入力ボックスのサイズを変更するには、 input-groupとinput-group-lgまたはinput-group-smクラスを使用できます。

 <code class="html"><div class="input-group input-group-lg"> <input type="search" class="form-control"> <button type="submit" class="btn btn-primary">搜索</button> </div></code>

5.プレースホルダーテキストを追加（オプション）

placeholderプロパティを使用して、入力ボックスにプレースホルダーテキストを追加できます。

 <code class="html"><input type="search" class="form-control" placeholder="搜索"></code>

6.入力ボックスのアライメントを設定する（オプション）

text-left 、 text-center 、またはtext-rightクラスを使用して、入力ボックステキストのアラインメントを設定できます。

 <code class="html"><input type="search" class="form-control text-center"></code>

以上がブートストラップの検索ボックスの実行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。