Bootstrap 4の検索バーの作成方法

1. 基本的な検索バーの作成方法

以下のHTMLコードは、Bootstrap 4を使用して基本的な検索バーを作成する方法を示しています。

<form class="form-inline">
  <input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
</form>

このコードでは、form要素に form-inline クラスを追加して、検索バーを横並びの形式で表示しています。input要素には form-control クラスを追加して、入力フィールドをスタイリングしています。

2. 検索バーのサイズ変更

検索バーのサイズを変更するには、form-control クラスに form-control-lg（大）または form-control-sm（小）を追加します。

<input class="form-control form-control-lg" type="search" placeholder="検索" aria-label="検索">

3. 検索バーのカスタマイズ

検索バーの見た目をカスタマイズするには、追加のクラスやCSSスタイルを使用することができます。以下は例です。

<form class="form-inline">
  <div class="input-group">
    <input class="form-control" type="search" placeholder="検索" aria-label="検索">
    <div class="input-group-append">
      <button class="btn btn-primary" type="submit">検索</button>
    </div>
  </div>
</form>

このコードでは、input-group クラスを使用して検索バーをグループ化し、input-group-append クラスを使用して入力フィールドの横にボタンを配置しています。

以上のように、Bootstrap 4を使用すると簡単に検索バーを作成することができます。必要に応じて、さまざまなクラスやスタイルを組み合わせてカスタマイズすることもできます。