Bootstrap 5 インプットグループ

入力グループ

.input-group クラスはコンテナであり、入力フィールドの前にまたは後にアイコン、テキスト、ボタンを追加して「ヘルプテキスト」として入力を強化します。

特定のヘルプテキストのスタイルを設定するには、 .input-group-text クラス：

例

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="ユーザー名">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="あなたのメール">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

実際に試してみてください

入力グループのサイズ

以下を .input-group-sm クラスは小規模な入力グループに使用され、 .input-group-lg 大規模な入力グループに使用されます：

例

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">小</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">デフォルト</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">大</span>
  <input type="text" class="form-control">
</div>

実際に試してみてください

複数の入力とアシスタント

複数の入力コントロールやプラグインを追加します：

例

<!-- 多个输入控件 -->
<div class="input-group mb-3">
  <span class="input-group-text">人名</span>
  <input type="text" class="form-control" placeholder="姓">
  <input type="text" class="form-control" placeholder="名">
</div>
<!-- 多个插件/帮助文本 -->
<div class="input-group mb-3">
  <span class="input-group-text">一</span>
  <span class="input-group-text">二</span>
  <span class="input-group-text">三</span>
  <input type="text" class="form-control">
</div>

実際に試してみてください

チェックボックスとラジオボックス付きの入力グループ

テキストの代わりに、チェックボックスやラジオボタンを使用することもできます：

例

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="テキスト">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="テキスト">
</div>

実際に試してみてください

入力グループボタン

例

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">基本ボタン</button>
  <input type="text" class="form-control" placeholder="テキスト">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="検索">
  <button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="テキスト">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">キャンセル</button>
</div>

実際に試してみてください

ドロップダウンボタン付きのインプットグループ

インプットグループにドロップダウンボタンを追加してください。通常の .dropdown ワッペンコンテナーは必要ありません。

例

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ドロップダウンボタン
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">リンク 1</a></li>
    <li><a class="dropdown-item" href="#">リンク 2</a></li>
    <li><a class="dropdown-item" href="#">リンク 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="ユーザー名">
</div>

実際に試してみてください