mcpField
B
bootstrap-v6-install

bootstrap-v6-install

github.com/twbs開発175.0k338 回インストール今日更新
リポジトリ

bootstrap-v6-install について

Bootstrap 6をプロジェクトに導入する開発者向けのガイドです。CDNでの導入と、npmを使ったSassのカスタマイズに対応し、CSS・JavaScriptの読み込みと動作確認を説明します。

主な機能

  1. 01CDNまたはnpmの導入方法選択
  2. 02BootstrapのCSSとJavaScript読み込み
  3. 03Sassトークンによるスタイル調整
  4. 04アセットとコンポーネントの確認

活用シーン

  1. 01静的ページやプロトタイプへの導入
  2. 02npmでのSassコンパイルと調整
  3. 03CSS・JavaScriptの読み込み問題の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/twbs/bootstrap --skill bootstrap-v6-install

インストール後、Claude Code で/bootstrap-v6-installを入力して読み込まれたか確認します。

詳細

プロジェクトにBootstrap 6を追加する

このスキルでは、ユーザーのプロジェクトにBootstrap 6をセットアップします。プロジェクトに合った方法を選んでください。ビルド手順が不要で最も手軽に始められるCDN、またはSassのカスタマイズやJSのバンドルに使うパッケージマネージャー（npm）です。バンドラー固有のセットアップ全般については、専用のbootstrap-npm、bootstrap-vite、bootstrap-webpack、またはbootstrap-parcelスキルを使用してください。

ワークフロー

  • ステップ1：インストール方法を選択（CDNまたはパッケージマネージャー）
  • ステップ2：Bootstrapと依存関係をインストール
  • ステップ3：BootstrapのCSSを読み込む
  • ステップ4：BootstrapのJavaScriptを読み込む
  • ステップ5：動作を確認

ステップ1：インストール方法を選択

  • CDN — ビルド手順は不要です。静的ページ、デモ、プロトタイプに最適です。以下のCDNセクションに進んでください。
  • パッケージマネージャー（npm） — BootstrapのSassトークンをカスタマイズする場合や、JSをツリーシェイクする場合に必要です。Node.jsとSassコンパイラーが必要です。npmのセクションに進んでください。

Bootstrap 6には、2つの任意のピアパッケージが必要です。

  • @floating-ui/dom — メニュー、ポップオーバー、ツールチップの位置指定に使います。これらを使わない場合は省略できます。
  • vanilla-calendar-pro — 日付選択に使います。使わない場合は省略できます。

ステップ2・3（CDN）：CDN経由で読み込む

<head>内にBootstrapのCSSを追加し、閉じタグ</body>の前にJSバンドルを追加します。バンドルにはFloating UIとVanilla Calendar Proが含まれます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap!</h1>
      <button class="btn-solid theme-primary">Primary button</button>
    </div>
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

別のバージョンを使用する場合は、Installのドキュメントから正確なURLとハッシュをコピーしてください。SRIハッシュを推測してはいけません。SRIを機能させるには、crossorigin="anonymous"属性が必要です。

Floating UIとVanilla Calendar Proを個別に読み込む（ペイロードを小さくする）には、インポートマップと非バンドル版のJSを使用してください。

<script type="importmap">
{
  "imports": {
    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom/+esm",
    "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/+esm"
  }
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script>

CDNでのセットアップはこれで完了です。ステップ5：動作を確認に進んでください。

ステップ2（npm）：インストール

npm install [email protected] @floating-ui/dom vanilla-calendar-pro

Bootstrap 6で公式のコンパイル済み出力に合わせるには、Sassコンパイラー（Dart Sass）とPostCSS/Autoprefixerが必要です。Node Sassはサポートされていません。セットアップに必要なビルドツールをインストールしてください。例：

npm install --save-dev sass autoprefixer postcss postcss-cli

ステップ3（npm）：BootstrapのCSSを読み込む

最新の@useルールを使ってBootstrapのソースSassをインポートしてください（@importは使用しないでください。Dart Sassでは削除されており、v6ではサポートされません）。

// Import all of Bootstrap's CSS
@use "bootstrap/scss/bootstrap";

with ()構文でトークンをカスタマイズします。変更したいキーだけを指定してください。Bootstrapがデフォルト値と上書き値をマージします。

@use "bootstrap/scss/bootstrap" with (
  $root-tokens: (
    --border-radius: .25rem,
    --spacer: 1.5rem,
  )
);

トークンマップ（$root-tokensおよび各コンポーネントの$*-tokensマップ）を通じてCSSカスタムプロパティを上書きするには、カスタマイズ › Sassに従ってください。Sassではトークン名に接頭辞を付けません（例：--border-radius、--spacer）。Bootstrapのdist/CDN CSSではPostCSSを実行して--bs-接頭辞を追加するため、ソースを自分でコンパイルすると接頭辞は付きません。

bootstrapを解決できるように--load-path=node_modulesを指定してSassをCSSにコンパイルし、その後PostCSSでAutoprefixerを実行します。

ステップ4（npm）：BootstrapのJavaScriptを読み込む

Bootstrap 6のJavaScriptはESMのみです。すべてのプラグインをbootstrapオブジェクトにインポートします。

import * as bootstrap from 'bootstrap'

または、自動ツリーシェイクに必要なものだけをインポートします。

import { Tooltip, Toast, Popover } from 'bootstrap'

bootstrap/js/dist/以下のファイルから、単一のプラグインを直接インポートすることもできます。

バンドラーを使用すると、Floating UIとVanilla Calendar ProはBootstrapを通じて自動的にインポートされます。

ステップ5：動作を確認

  1. ページを読み込む（または開発サーバーを起動する）と、サンプルの.btn-solid.theme-primaryボタンと.containerにスタイルが適用されていることを確認できます。これでBootstrapのCSSが読み込まれているとわかります。
  2. JSコンポーネント（ツールチップやダイアログなど）を起動し、JavaScriptがコンソールエラーなしで読み込まれていることを確認します。
  3. CDNでセットアップした場合は、integrityハッシュがリンク先のバージョンと一致していることを確認します（一致しない場合、ファイルの読み込みがブロックされます）。
  4. Sassのコンパイルに失敗する場合は、@importではなく@useを使っていることと、--load-path=node_modulesを渡していることを確認します。
  5. Bootstrap 6を使用するには、oklch()とcolor-mix()に対応したブラウザーが必要です。

コメント

Markdown 対応