ブートストラップで検索ボックスを作成する方法

プロジェクト開発プロセスでは、多かれ少なかれ検索オプションを使用します。それでは、標準の見栄えの良い検索ボックスを作成するにはどうすればよいでしょうか? ここでは、ブートストラップに付属するコントロールである input-group をお勧めします。

推奨マニュアル：Bootstrap中国語マニュアル

このコントロールの公式説明を簡単に見てみましょう

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

It私たちが普段使っているフォーム送信機能では、入力フィールドの両側にボタンやテキストを追加できます。

関連する推奨事項: 「Bootstrap 入門チュートリアル 」

Contents の次の 7 つの内容は、実現できる基本的な機能です。ここでは 4 番目のボタンのアドオンに焦点を当てます。興味があれば、残りの部分は自分で学ぶことができます。

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

上の段落は、入力グループのボタンが通常のボタンとは異なり、異なるネスト レベルが必要であることを意味します。実際、簡単に言うと、input-group-addon はもう使用しませんが、input-group-btn を使用してボタンを管理します。私が提供したデモ コードは次のとおりです:

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

最終的な効果は次のとおりです。 Display

これにより、検索バーのオプションが完全に表示され、スタイルは一貫したままになります。

おすすめ関連記事:
1.Bootstrap テーブルの検索ボックスとクエリ関数の詳細な説明
2.BootStrap テーブルのサーバー側のバックグラウンド ページングとカスタム検索ボックスの実装の使用
関連ビデオの推奨事項:
1.Dugu Jiijian(7)_Bootstrap ビデオ チュートリアル

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