HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

Bootstrap入力グループ（Input Group）の使い方と実装例

Bootstrapの入力グループ（Input Group）を使用すると、テキスト入力フィールドの前後に補足的な要素（アドオン）を追加できます。これにより、ユーザーの入力に関連する共通の記号や単位を視覚的に示し、より分かりやすいインターフェースを構築することが可能です。

例えば、金額を表す「$」記号、Twitterのユーザー名を示す「@」、小数点以下を表す「.00」など、アプリケーションの用途に応じた任意の要素を入力欄に組み込めます。

入力グループの基本構造

入力グループは、input-groupクラスを指定したコンテナ要素の中に、input-group-addonクラスを付けたアドオン要素と、form-controlクラスを付けた入力フィールドを配置して作成します。

  • アドオンを入力欄の前に配置すると、前置き（prepend）として機能します。
  • アドオンを入力欄の後ろに配置すると、後付け（append）として機能します。

サンプルコード

以下のコードを実行すると、Bootstrapの入力グループを作成できます。「@」を前に付けた例、「.00」を後ろに付けた例、そして「$」と「.00」を両側に付けた例の3パターンを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Input Group</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <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>

            <!-- 「.00」を後ろに追加した例 -->
            <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>
   </body>
</html>

このように、input-group-addonを活用することで、入力内容の意味を明確に伝えるフォームを簡単に作成できます。通貨記号や単位、SNSのハンドル名など、さまざまな場面で活用してみてください。

  1. CSSのgrid-column-endプロパティの使い方を徹底解説

    CSSのgrid-column-endプロパティは、グリッドレイアウトにおいてグリッドアイテムがどの列で終了するかを指定するためのプロパティです。このプロパティを使うことで、特定のアイテムを複数の列にまたがって表示させたり、配置の終了位置を細かく制御したりすることができます。 grid-column-endプロパティとは grid-column-endプロパティは、グリッドアイテムの列方向の終了位置を定めます。主な指定方法には以下のようなものがあります。 span 2 — 現在の位置から2列分にまたがって表示する 3 — 3番目のグリッドラインで終了する auto — 自動的に配置される（デ

  2. Bootstrapヘルパークラスの使い方を解説！pull-left・pull-right・clearfixの基本

    BootstrapのヘルパークラスとはBootstrapには、レイアウトの調整を手軽に行うための「ヘルパークラス（ユーティリティクラス）」が用意されています。代表的なものとして、要素を左に浮かせる.pull-left、右に浮かせる.pull-right、ブロック要素を中央揃えにする.center-blockなどがあります。これらのクラスを使いこなすことで、CSSを一から記述することなく、素早くレイアウトを組み立てることができます。floatを解除する.clearfixクラス要素にfloatを指定すると、親要素の高さが崩れてレイアウトが乱れることがあります。そんなときに便利なのが.clearfi