プログラミング

Bootstrapのボタンとフォーム

最終更新： 28/04/2025
1分未満

Bootstrapは、ウェブデザインやフロントエンド開発において非常に人気のあるフレームワークです。このフレームワークは、レスポンシブデザイン、簡単なカスタマイズ、クロスブラウザ対応のユーザーインターフェースを素早く構築できるツールを提供します。Bootstrapの要素である「ボタン」「アイコン」「フォーム」などは、開発者が素早くインタラクティブで魅力的なウェブアプリケーションやウェブサイトを作成するために欠かせない重要な要素です。本記事では、これらの主要な要素について詳細に説明します。

1. ボタン (Buttons)

Bootstrapのボタンは、ウェブアプリケーションやウェブサイトにおけるインタラクションのための基本的なコンポーネントです。ボタンは、異なる色、サイズ、状態（アクティブ、無効など）を持つことができます。

関連記事

ボタンの種類

Bootstrapでは、いくつかの種類のボタンスタイルが提供されています。これにより、開発者はアプリケーションやサイトのデザインに合わせたボタンを簡単に選択できます。

  • 基本的なボタン

    最もシンプルなボタンです。使用するには、btnクラスと、目的に応じたカラークラスを指定します。

    html
    <button class="btn btn-primary">プライマリーボタンbutton>

  • ボタンのサイズ

    ボタンのサイズを変更することができます。btn-lg（大）やbtn-sm（小）を追加することで、サイズを変更できます。

    html
    <button class="btn btn-success btn-lg">大きなボタンbutton>
<button class="btn btn-danger btn-sm">小さなボタンbutton>

  • ボタンの状態

    ボタンにはdisabledクラスを追加することで無効化することができます。無効なボタンはクリックできません。

    html
    <button class="btn btn-secondary" disabled>無効なボタンbutton>

ボタンのグループ化

複数のボタンを一緒に表示したい場合、ボタングループを使うことができます。

html
<div class="btn-group">
  <button class="btn btn-info">ボタン1button>
  <button class="btn btn-info">ボタン2button>
  <button class="btn btn-info">ボタン3button>
div>

2. アイコン (Icons)

アイコンは、視覚的に情報を伝えるために使用される小さなグラフィックです。Bootstrapでは、アイコンを簡単に使えるようにするために、Bootstrap Iconsというアイコンセットが提供されています。

アイコンの追加

Bootstrap Iconsを使用するためには、まずCDNリンクをHTMLファイルに追加する必要があります。

html
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

その後、アイコンを使用するには、タグやタグを使用してアイコンを表示できます。

html
<i class="bi bi-house-door">i> ホーム

例えば、上記のコードでは、家のアイコンが表示されます。アイコンはCSSで簡単にカスタマイズでき、サイズや色を変更することも可能です。

アイコンのサイズと色

アイコンのサイズを調整するには、fs-1（最小）からfs-6（最大）までのクラスを使用できます。また、アイコンの色は、Bootstrapのテキスト色クラスを使って変更できます。

html
<i class="bi bi-star fs-2 text-warning">i> 星アイコン

3. フォーム (Forms)

フォームはユーザーからデータを収集するための重要なコンポーネントです。Bootstrapでは、フォームを簡単にデザインし、ユーザーに優れた入力体験を提供できます。

基本的なフォーム

フォーム要素は、

, ,