Laravel と Bootstrap 4 を統合するための完全なソリューションを共有します

次のコラム Laravel チュートリアル では、Laravel と Bootstrap 4 を統合する完全なソリューションを紹介します。困っている友人の役に立てば幸いです。

2018 年 1 月 23 日の更新: bootstrap 4 の最終バージョンがリリースされているため、laravel5.5 で bootstrap 4 を直接使用したい場合は、これが比較的賢明です。良いニュースは、以下の手順を段階的に実行する必要がないことです。プラグインをインストールすることで、Boostrap 4 をすぐに使用できます。プラグインのリンク: laravelnews/laravel-twbs4。詳細は説明しません。使用方法については、プラグインのドキュメントに従ってください。ブートストラップ 4 を laravel5.5 より前のバージョンに統合する場合でも、次のプロセスを実行する必要があります。

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

bootstrap-sass

package.json から削除し、app.scss で npm install

(2) を実行します。

新しいブートストラップ sass ファイルをファイルに導入します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">npm install bootstrap@4.0.0-beta popper.js --save-dev</pre><div class="contentsignin">ログイン後にコピー</div></div> (3) ブートストラップ js ファイルをコンパイルします

このステップでは、

bootstrap .min を直接コピーすることもできます。 js

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

bootstrap.min.js

を使用してコンパイルします 現時点では、次の行を

webpack.mix.js

に追加する必要があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">//替换掉之前bootstrap-sass的引入 //如果你是laravel 5.5及以后的版本，这里的node_modules换成~符号 @import &quot;node_modules/bootstrap/scss/bootstrap&quot;;</pre><div class="contentsignin">ログイン後にコピー</div></div>

mix.autoload()

メソッドを通じて jquery と Popper.js が自動的に読み込まれることがわかります。以下のように mix.js() メソッドが bootstrap.min.js ファイルをコンパイルすると、対応する依存関係がコンパイルされます。最後に、コンパイルされたファイルを public/js/# に送信します。 ## ディレクトリに移動し、必要に応じてそれを呼び出します。 方法 2 では、bootstrap.bundle.min.js

を使用してコンパイルします。

ブートストラップの node_modules/bootstrap/dist/js/

ディレクトリに移動すると、次に、別の

bootstrap.bundle.min.js ファイルがあることがわかります。実際、このファイルには Popper.js がプリコンパイルされていますが、# はありません。 ##jquery なので、先ほどの webpack.mix.js ファイルでは、実際には次のように書くことができます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">mix.autoload({ jquery: [&amp;#39;$&amp;#39;, &amp;#39;window.jQuery&amp;#39;,&quot;jQuery&quot;,&quot;window.$&quot;,&quot;jquery&quot;,&quot;window.jquery&quot;], &amp;#39;popper.js/dist/umd/popper.js&amp;#39;: [&amp;#39;Popper&amp;#39;] }); mix.js([ &amp;#39;node_modules/bootstrap/dist/js/bootstrap.min.js&amp;#39; ],&amp;#39;public/js/bootstrap.min.js&amp;#39;)</pre><div class="contentsignin">ログイン後にコピー</div></div> 最終的な圧縮ファイルは同じです。 npm run dev を使用してコンパイルすると、2 番目の方法で圧縮されたファイルは小さくなりますが、実稼働環境、つまり

npm runproduction

の場合、サイズは小さくなります。両方とも同じになります。 もちろん、2 番目の方法には、記述する行が 1 行少なくなることに加えて、別の利点もあります。それは、最初に npm install Popper.js を行う必要がないことです。理解しやすく、ダウンロードの必要性も少なくて済みます。

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

詳細は説明しません。この期間中に混乱するかもしれないのは、ブートストラップ 4 のページング スタイルをアップグレードする方法です。多くの方法があります。最も簡単で最速の方法を次に示します:

まず第一に、

resources/views/vendor/pagination

ディレクトリを見つけてください。これは、laravel のデフォルトのページング スタイル ビュー ファイルです。

php 職人のベンダー:publish## を実行しない場合は、 #, それはそこにあります

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')

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

に変更してから、

bootstrap-4.blade をデフォルトの # に変更します。 ##default.blade, このようにして、laravel はページネーションを読み込むときに 4 スタイルを使用します。 もちろん、laravel ドキュメントに次のように書かれているように、ページングをレンダリングするたびに特定のページング ビュー ファイルを指定することもできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">default.blade.php bootstrap-4.blade.php simple-default.blade.php simple-bootstrap-4.blade.php</pre><div class="contentsignin">ログイン後にコピー</div></div>しかし、これは面倒すぎるので、知っておいてください。 。

以上がLaravel と Bootstrap 4 を統合するための完全なソリューションを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。