【Blazor】 Bootstrapの導入

更新日：2024/06/12

この記事では、Bootstrapの導入方法について解説します。

Bootstrapとは？
Bootstrapのインストール
_Layout.cshtmlに参照追加
まとめ

Bootstrapとは？

Bootstrapは、CSS（Cascading Style Sheets）のフレームワークです。事前にデザインされたスタイルやレイアウトがたくさん含まれているので、特にデザインの知識がなくても、美しいウェブページを作ることができます。

例えば、ボタン、ナビゲーションバー、カード、モーダルウィンドウなどのコンポーネントを利用することができます。

Bootstrapのインストール

Bootstrapをインストールしていきます。プロジェクトの初期状態でも、Bootstrapのcssのみ含まれていますが、バージョンが古い可能性を考慮して、一度削除します。

[wwwroot/css/bootstrap]のフォルダごと削除します。

Bootstrapをインストールしていきます。[wwwroot]を選択して、右クリックを押してください。その後、[追加]→[クライアント側のライブラリ]を選択してください。

選択すると、クライアント側のライブラリの画面が表示されます。

ライブラリの項目に[bootstrap]と入力すると、自動的に現在の最新バージョンが表示されます。記事の執筆時点では、バージョン5.3.3が最新版です。

次に追加するファイルを選択します。デフォルトでは、[ライブラリのすべてのファイルを含める]が選択されていますが、追加するファイルを選択するには、まず[特定のファイルの選択]に切り替える必要があります。

[bootstrap.min.css]と[bootstrap.min.js]があれば、全ての機能を網羅できるので、この２つのみチェックを入れてください。

準備ができたら、インストールを選択してください。インストールが終わったら、 [ターゲットロケーション]の場所にファイルがあることを確認してください。

_Layout.cshtmlに参照追加

インストールした[bootstrap.min.css]と[bootstrap.min.js]の参照を追加します。 _Layout.cshtmlを次のように変更します。

_Layout.cshtml


@using Microsoft.AspNetCore.Components.Web
@namespace Blazor_Bootstrap.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />

    @* ↓↓↓　bootstrapのcss読み込み　↓↓↓ *@
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Blazor_Bootstrap.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    @* ↓↓↓　bootstrapのjs読み込み　↓↓↓ *@
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

13行目と33行目に[bootstrap.min.css]と[bootstrap.min.js]の参照を追加しています。これでBootstrapの導入は完了です。