Bootstrap 5 オフキャンバス

Offcanvas（帆布）

Offcanvas（キャンバス）はモーダル（デフォルトで非表示でアクティブ時に表示）に似ていますが、通常、サイドバーのナビゲーションメニューとして使用されます。

Offcanvas 侧边栏の作成方法

以下に、offcanvas 侧边栏の作成方法を示します：

例

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">タイトル</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>いくつかのテキスト。いくつかのテキスト。いくつかのテキスト。</p>
    <p>いくつかのテキスト。いくつかのテキスト。いくつかのテキスト。</p>
    <button class="btn btn-secondary" type="button">ボタン</button>
  </div>
</div>
<!-- オフキャンバスサイドバーを開くボタン -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Offcanvas サイドバーを開く
</button>

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

例解説

.offcanvas クラスは offcanvas サイドバーを作成します。

.offcanvas-start クラスは offcanvas を配置し、幅を 400px に設定します。さらに多くの配置クラスについては、以下の例を参照してください。

.offcanvas-title クラスを使用することで適切な余白と行高が確保されます。

次に、 .offcanvas-body クラスを使用する必要があります。

offcanvas サイドバーを開く場合、 <button> または <a> 要素が .offcanvas コンテナの id（この例では #demo）。

を使用する必要があります。 <a> 要素が offcanvas サイドバーを開く場合、href 属性ではなく data-bs-target 属性が #demo。

Offcanvas 配置を使用してください。

次に、 .offcanvas-start|end|top|bottom offcanvas を左側、右側、上部、下部に配置します：

右側の例

<div class="offcanvas offcanvas-end" id="demo">

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

上部の例

<div class="offcanvas offcanvas-top" id="demo">

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

下部の例

<div class="offcanvas offcanvas-bottom" id="demo">

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