Bootstrap-input-groups

ブートストラップ-入力グループ

この章では、Bootstrapがサポートするもう1つの機能である入力グループについて説明します。 入力グループは拡張リンクです：/bootstrap/bootstrap_forms [フォームコントロール]。 入力グループを使用すると、テキストベースの入力にテキストまたはボタンを簡単に追加および追加できます。

入力フィールドに先頭および末尾のコンテンツを追加することにより、ユーザーの入力に共通の要素を追加できます。 たとえば、ドル記号、Twitterユーザー名の@など、アプリケーションインターフェイスで一般的なものを追加できます。

。form-control-に要素を追加または追加するには

• クラス .input-group で<div>にラップします
• 次のステップとして、その同じ<div>内で、クラス .input-group-addon を使用して<span>内に追加コンテンツを配置します。
• 次に、この<span>を<input>要素の前または後に配置します。

'_ブラウザー間の互換性のために、ここで<select>要素を使用しないでください。これらの要素はWebKitブラウザーでは完全にスタイル設定できないためです。 また、入力グループクラスをフォームグループに直接適用しないでください。 入力グループは分離されたコンポーネントです。_

基本入力グループ

次の例は、基本的な入力グループを示しています-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </div>

      <br>

      <div class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </div>

      <br>

      <div class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </div>
   </form>

</div>

入力グループのサイズ設定

入力グループのサイズを変更するには、。input-group-lg、input-group-sm、input-group-xs *などの相対フォームサイズ設定クラスを *.input-group 自体に追加します。 内のコンテンツは自動的にサイズ変更されます。

次の例はこれを示しています-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "input-group input-group-lg">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>

      <br>

      <div class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>

      <br>

      <div class = "input-group input-group-sm">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "Twitterhandle">
      </div>
   </form>

</div>

チェックボックスとラジオアドオン

次の例に示すように、テキストの代わりにラジオボタンとチェックボックスを前に追加または追加できます-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">

         <div class = "col-lg-6">
            <div class = "input-group">

               <span class = "input-group-addon">
                  <input type = "checkbox">
               </span>

               <input type = "text" class = "form-control">
            </div><!--/input-group -->
         </div><!--/.col-lg-6 --><br>

         <div class = "col-lg-6">
            <div class = "input-group">

               <span class = "input-group-addon">
                  <input type = "radio">
               </span>

               <input type = "text" class = "form-control">
            </div><!--/input-group -->
         </div><!--/.col-lg-6 -->

      </div><!--/.row -->
   </form>

</div>

ボタンアドオン

入力グループのボタンを前に追加または追加することもできます。 .input-group-addon クラスの代わりに、クラス .input-group-btn を使用してボタンをラップする必要があります。 これは、オーバーライドできないデフォルトのブラウザスタイルのために必要です。 次の例はこれを示しています-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">

         <div class = "col-lg-6">
            <div class = "input-group">

               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>

               <input type = "text" class = "form-control">

            </div><!--/input-group -->
         </div><!--/.col-lg-6 --><br>

         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">

               <span class = "input-group-btn">
                  <button class = "btn btn-default" type = "button">
                     Go!
                  </button>
               </span>

            </div><!--/input-group -->
         </div><!--/.col-lg-6 -->

      </div><!--/.row -->
   </form>

</div>

ドロップダウン付きのボタン

次の例に示すように、ボタンとドロップダウンメニューを .input-group-btn クラスにラップするだけで、入力グループにドロップダウンメニュー付きのボタンを追加できます-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">

         <div class = "col-lg-6">
            <div class = "input-group">

               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default dropdown-toggle"
                     data-toggle = "dropdown">
                     DropdownMenu
                     <span class = "caret"></span>
                  </button>

                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>

                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!--/btn-group -->

               <input type = "text" class = "form-control">
            </div><!--/input-group -->
         </div><!--/.col-lg-6 --><br>

         <div class = "col-lg-6">
            <div class = "input-group">

               <input type = "text" class = "form-control">
               <div class = "input-group-btn">

                  <button type = "button" class = "btn btn-default dropdown-toggle"
                     data-toggle = "dropdown">
                     DropdownMenu
                     <span class = "caret"></span>
                  </button>

                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>

                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>
               </div><!--/btn-group -->

            </div><!--/input-group -->
         </div><!--/.col-lg-6 -->

      </div><!--/.row -->
   </form>

</div>

セグメント化されたボタン

入力グループのボタンドロップダウンをセグメント化するには、ドロップダウンボタンと同じ一般的なスタイルを使用しますが、次の例に示すように、ドロップダウンとともにプライマリアクションを追加します-

<div style = "padding: 100px 100px 10px;">

   <form class = "bs-example bs-example-form" role = "form">
      <div class = "row">

         <div class = "col-lg-6">
            <div class = "input-group">

               <div class = "input-group-btn">
                  <button type = "button" class = "btn btn-default"
                     tabindex = "-1">Dropdown Menu</button>

                  <button type = "button" class = "btn btn-default dropdown-toggle"
                     data-toggle = "dropdown" tabindex = "-1">
                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>

                  <ul class = "dropdown-menu">
                     <li><a href = "#">Action</a></li>
                     <li><a href ="#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>

                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>

               </div><!--/btn-group -->
               <input type = "text" class = "form-control">

            </div><!--/input-group -->
         </div><!--/.col-lg-6 --><br>

         <div class = "col-lg-6">
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <div class = "input-group-btn">

                  <button type = "button" class = "btn btn-default" tabindex = "-1">
                     Dropdown Menu
                  </button>

                  <button type = "button" class = "btn btn-default dropdown-toggle"
                     data-toggle = "dropdown" tabindex = "-1">

                     <span class = "caret"></span>
                     <span class = "sr-only">Toggle Dropdown</span>
                  </button>

                  <ul class = "dropdown-menu pull-right">
                     <li><a href = "#">Action</a></li>
                     <li><a href = "#">Another action</a></li>
                     <li><a href = "#">Something else here</a></li>

                     <li class = "divider"></li>
                     <li><a href = "#">Separated link</a></li>
                  </ul>

               </div><!--/btn-group -->
            </div><!--/input-group -->
         </div><!--/.col-lg-6 -->

      </div><!--/.row -->
   </form>

</div>