Bootstrap 4 を Laravel に統合するにはどうすればよいですか?

この記事では主に、Bootstrap 4 を統合した Laravel の完全なソリューションを紹介します。非常に優れており、必要な友人は参照してください。

[関連ビデオの推奨: Bootstrap チュートリアル]

ブートストラップ 4 の最終バージョンがリリースされているため、ブートストラップ 4 を laravel5.5 で直接使用するのが比較的賢明なはずです。これは良いニュースです。つまり、次の手順を段階的に実行する必要はありません。プラグインをインストールできます。Boostrap 4 を早速使ってみましょう。プラグインのリンク: laravelnews/laravel-twbs4。プラグインのドキュメントに従ってください。 ブートストラップ 4 を laravel 5.5 より前のバージョンに統合する場合でも、次のプロセスを実行する必要があります:

(1) ブートストラップと対応する依存関係をインストールします

npm install bootstrap@4.0.0-beta popper.js --save-dev

package.json から bootstrap-sass を削除しますそして、npm install

を実行します

(2) 新しいブートストラップ sass ファイルを app.scss ファイルに導入します

//替换掉之前bootstrap-sass的引入
//如果你是laravel 5.5及以后的版本，这里的node_modules换成~符号
@import "node_modules/bootstrap/scss/bootstrap";

(3) ブートストラップ js ファイルをコンパイルします このステップでは、 ブートストラップを直接コピーすることもできます。 min.js ファイルをパブリック ディレクトリにコピーして参照しますが、実際にはこれは不可能です。ブートストラップ 4 の js コンポーネントも jquery とデフォルトの Popper.js に依存しているためです。ファイルがコンパイルされていません。

方法 1 では、bootstrap.min.js を使用してコンパイルします

現時点では、次の行を webpack.mix.js に追加する必要があります:

mix.autoload({
  jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
  'popper.js/dist/umd/popper.js': ['Popper']
});
mix.js([
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
    ],'public/js/bootstrap.min.js')

ご覧のとおり、mix.autoload( ) メソッド jquery と Popper.js を自動的にロードします。これにより、以下の mix.js() メソッドが bootstrap.min.js ファイルをコンパイルするときに、対応する依存関係がコンパイルされます。 最後に、コンパイルされたファイルをに送信します。 public /js/ ディレクトリに移動し、必要に応じてそれを呼び出します。

方法 2 では、bootstrap.bundle.min.js を使用してコンパイルします

bootstrap の node_modules/bootstrap/dist/js/ ディレクトリに移動すると、別の bootstrap.bundle.min があることがわかります。 js ファイル、Popper.js は実際にはこのファイル内でプリコンパイルされていますが、jquery がないため、先ほどの webpack.mix.js ファイルでは、実際には次のように記述できます:

mix.autoload({
  jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});
mix.js([
    'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
    ],'public/js/bootstrap.min.js')

最終的な圧縮ファイルは次のとおりです。同じように、npm run dev を使用してコンパイルすると、2 番目の方法で圧縮されたファイルの方が小さくなりますが、本番環境、つまり npm runproduction の場合、両方のサイズは同じになります。 。

もちろん、2 番目の方法には記述が 1 行少ないことに加えて、別の利点があります。つまり、最初に npm install Popper.js を行う必要がありません。それは理解できることです。ダウンロード。

(4) ブートストラップ 4 のページネーション ブレードをロードします

この時点で、ブートストラップ 4 のドキュメントに従ってブレード ビューで実際に使用することも、既存のブートストラップ 3 を 4 に変更することもできます。破壊的なアップグレードであるため、下位互換性はありません。プロジェクトのサイズによって異なりますが、一般的に、ブートストラップ 3 を 4 に変更するには時間がかかります。

この期間中に混乱するかもしれないのは、ブートストラップ 4 のページング スタイルをアップグレードする方法です。最も簡単で速い方法は次のとおりです。

まず、次の方法を見つけます。

これで、これが完成です resources/views/vendor/pagination 目录，这是laravel默认的分页样式视图文件，如果没有执行一下 php artisan vendor:publish

default.blade.php
bootstrap-4.blade.php
simple-default.blade.php
simple-bootstrap-4.blade.php

laravel がデフォルトでブートストラップ 4 ページング テンプレート ファイルを実際に準備していることがわかります。現時点で最も簡単なのは、以前の

default.blade のファイル名を変更することです。元のブートストラップ 3 なので、それを bootstrap-3.blade.php に変更し、次に bootstrap-4.blade をデフォルトの default.blade に変更します。これにより、laravel はページングをロードするときに 4 スタイルを使用します。

もちろん、laravelのドキュメントに記載されているように、ページングをレンダリングするたびに次のように特定のページングビューファイルを指定できます:

$paginator->links('vendor.pagination.bootstrap-4')

しかし、これはあまりにも面倒なので、知っておいてください。

上記は私があなたのためにまとめたものです。

関連記事:

Reactサーバーレンダリングの実装の問題を詳しく説明する

jqueryを使用してPC側カルーセルを記述する方法(詳細なチュートリアル)

Vueでヘッダーコンポーネントを介して開発する方法(詳細なチュートリアル)

以上がBootstrap 4 を Laravel に統合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。