Bootstrap - 入力グループ：初心者向けのやさしいガイド

こんにちは、未来的なウェブ開発者さんたち！Bootstrapの入力グループに関する興奮する旅にお連れします。コンピュータサイエンスを多年間教えてきた身として、これらの概念を理解したときに生徒たちが輝く姿を見てきました。では、一緒にあなたのウェブフォームを素晴らしく見せるために潜り込んでみましょう！

入力グループとは？

始める前に、ピザデリバリーサービスのフォームを設計していることを想像してください。顧客の名前や住所、そしてもちろん重要なピザのトッピングのフィールドが必要です。入力グループは、これらのフォーム要素が統一され、プロフェッショナルに見える秘密のソースです。

Bootstrapでは、入力グループを使用して、フォームコントロールにプレフィックス、サフィックス、または他の要素を追加できます。フォームの視覚的アピールと機能性を向上させ、ユーザーにやさしく、直感的にします。

例：基本的な入力グループ

簡単な例から始めましょう：

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="ユーザー名">
</div>

このコードでは：

• input-groupクラスを持つコンテナを作成します。
• mb-3クラスは下部にマージンを追加します。
• input-group-textを使用して'@'シンボルのプレフィックスを追加します。
• インプットフィールドにはform-controlクラスを適用してスタイルを設定します。

これにより、 '@'シンボル付きのスリムなインプットフィールドが作成され、ユーザー名やメールアドレスの入力に最適です！

ワrapping

時々、入力グループが一行に収まらない場合があります。心配しないでください。Bootstrapは自動的に折り返しをサポートしています。

例：折り返しのある入力グループ

<div class="input-group flex-nowrap">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="ユーザー名">
<span class="input-group-text">.com</span>
</div>

ここでは、flex-nowrapを入力グループに追加します。これにより、可能な限りすべての要素が同じ行に保持されますが、画面が狭すぎる場合は綺麗に折り返します。

サイズ

ゴールディロックスのように、時々入力グループのサイズがちょうど良い場合があります。Bootstrapは、あなたのニーズに合わせたさまざまなサイズオプションを提供しています。

例：異なるサイズの入力グループ

<div class="input-group input-group-sm mb-3">
<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 input-group-lg">
<span class="input-group-text">大</span>
<input type="text" class="form-control">
</div>

input-group-smまたはinput-group-lgを追加することで、小さなまたは大きな入力グループを作成できます。デフォルトサイズは追加クラス不要です。

チェックボックスとラジオボタン

単純なテキストインプットだけでは不十分な場合があります。チェックボックスやラジオボタンを入力グループに追加してみましょう。どのようにするか見てみましょう！

例：チェックボックスを入力グループに追加

<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="チェックボックスここに">
</div>

この例では、チェックボックスをinput-group-textディブの中に配置しています。form-check-inputクラスでチェックボックスをスタイル化し、mt-0で上のマージンを除去します。

複数のインプット

一つのインプットで満足するな！複数のフィールドを持つ入力グループを作成してみましょう。

例：複数のインプット

<div class="input-group">
<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">
<input type="text" class="form-control" placeholder="受信者のユーザー名">
<button class="btn btn-outline-secondary" type="button">ボタン</button>
</div>

ここでは、インプットフィールドの隣にボタンを追加しています。フォームの送信や検索のトリガーなどのアクションに使用できます。

ボタンとドロップダウン

ユーザーに更多信息を提供したい場合は、ドロップダウンをボタンアドオンに追加してみましょう。

例：ボタンにドロップダウンを追加

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="検索...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
オプション
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">アクション</a></li>
<li><a class="dropdown-item" href="#">他のアクション</a></li>
<li><a class="dropdown-item" href="#">ここに他のもの</a></li>
</ul>
</div>

これにより、インプットフィールドの隣にドロップダウンボタンが作成され、ユーザーに追加のオプションを提供します。

カスタムフォーム

Bootstrapを使用して、入力グループ内にカスタムフォーム要素を作成することもできます。カスタムセレクトの例を見てみましょう。

例：カスタムセレクト

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">オプション</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>選択...</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>
</div>

これにより、入力グループ内にカスタムセレクトドロップダウンが作成され、他のBootstrap要素と一貫したスタイルで表示されます。

カスタムファイルインプット

最後に、入力グループ内にカスタムファイルインプットを作成する方法を見てみましょう。

例：カスタムファイルインプット

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">アップロード</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>

これにより、スタイリッシュなファイルインプットフィールドが作成され、ユーザーがフォームを通じてファイルをアップロードできるようになります。

結論

そしてここまでが、Bootstrapの入力グループの世界を旅したものです。基本的な例からより複雑な設定まで、さまざまな概念を学びました。これらの概念をマスターする鍵は実践です。さまざまな要素を組み合わせて試し、サイズやスタイルを遊び、最も重要なのは、楽しむことです！

このまとめを迎えるにあたり、ある生徒が私に言ったことが思い出されます。「Bootstrapはウェブデザインのレゴみたいだ！」そして、それは間違いありません。素晴らしいピースが全部揃った今 - さあ、何か素晴らしいものを建てましょう！

ハッピーコーディング、そしてあなたのフォームが常にユーザーにやさしく、視覚的に魅力的であることを願っています！

メソッド	説明
基本的な入力グループ	フォームコントロールにプレフィックスまたはサフィックスを追加
折り返し	小さなスクリーンでも入力グループが綺麗に折り返す
サイズ	小、デフォルト、大の入力グループを作成
チェックボックスとラジオボタン	入力グループにチェックボックスやラジオボタンを追加
複数のインプット	一つの入力グループに複数のインプットフィールドを組み合わせ
ボタンアドオン	入力グループにインタラクティブなボタンを追加
ボタンとドロップダウン	ボタンアドオンにドロップダウンメニューを追加
カスタムフォーム	入力グループ内にカスタムフォーム要素を作成
カスタムファイルインプット	スタイリッシュなファイルインプットフィールドを作成

Credits: Image by storyset