書籍「Laravelの教科書」Laravel13対応サポートガイド公開中 → ダウンロードはこちら

LaravelでBootstrapのバージョンを5から4にダウングレードする方法

Laravel・PHP豆知識・トラブル対策

Laravelは php artisan ui bootstrap –auth コマンドにより、Bootstrapを使った認証機能を追加できます。その際、最新版のBootstrapがインストールされます。

ただ、もしBootstrapのバージョンをダウングレードしたい場合にどうするか。

手順を解説します。

なおLaravelバージョンは8、Bootstrapは5から4に変更するという前提で記載しています。

LaravelでBootstrapのバージョンを5から4にダウングレードする方法

① Bootstrap4のダウンロード

下記のBootstrapの公式ページにて、Compiled CSS and JS ファイルをダウンロードします。

 

② ダウンロードファイルをLaravelプロジェクトにいれる

ダウンロードしたフォルダを解凍します。

JSフォルダの中のbootstrap.min.js をプロジェクト内のpublic/js の中にいれます。

CSSフォルダの中のbootstrap.min.css をプロジェクト内のpublic/css の中にいれます。

③ テンプレートファイルを書き替える

resources/layouts/app.blade.phpファイルを開きます。

元々のapp.js と app.cssを無効にし、代わりに②で追加したファイルを読み込むようにします。

さらに jQuery と Popper.js も追加します。こちらは、Bootstrapの公式ページにて【CDNから参照】より、コードをコピーします。

上記を実行すると、コードは次のようになります。

【app.blade.php】

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    {{-- 無効にする --}}
    {{-- <script src="{{ asset('js/app.js') }}" defer></script> --}}

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    {{-- 無効にする --}}
    {{-- <link href="{{ asset('css/app.css') }}" rel="stylesheet"> --}}

    {{-- 追加する --}}
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>

以上です。

Laravel・PHP豆知識・トラブル対策

生成AIを「安全に」使うための研修・セミナー

お問い合わせ

生成AIの業務活用で気になるのは、効率だけでなくセキュリティです。 実践的な活用に加え、セキュリティ対策もお伝えします。

詳細を見てみる
 

生成AIを「安全に」使うための研修・セミナー

お問い合わせ

生成AIの業務活用で気になるのは、効率だけでなくセキュリティです。 実践的な活用に加え、セキュリティ対策もお伝えします。

詳細を見てみる

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新版Laravel13への対応に対応。Laravel8からの各バージョンのテキストもご覧になれます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel13に対応。Laravel8からの各バージョンのテキストもご覧になれます♪

Laravelの本を書きました。


ひつじが目印♪

Laravelの使い方を分かりやすく解説した本を書きました。 書店やAmazon等のオンラインショップにて販売中
最新版Laravel13対応用サポートガイド(PDF)あり

書籍の詳細を見てみる

Laravelの本書きました。


ひつじが目印♪
クリックするとamazonページへ。
最新版Laravel13対応用
サポートガイド(PDF)あり

書籍の詳細を見てみる
シェアする
Twitter始めました。

コメント

タイトルとURLをコピーしました