ホームページ > 記事 > PHPフレームワーク > Laravel と Bootstrap 4 を統合するための完全なソリューションを共有します
次のコラム Laravel チュートリアル では、Laravel と Bootstrap 4 を統合する完全なソリューションを紹介します。困っている友人の役に立てば幸いです。
2018 年 1 月 23 日の更新: bootstrap 4 の最終バージョンがリリースされているため、laravel5.5 で bootstrap 4 を直接使用したい場合は、これが比較的賢明です。良いニュースは、以下の手順を段階的に実行する必要がないことです。プラグインをインストールすることで、Boostrap 4 をすぐに使用できます。プラグインのリンク: laravelnews/laravel-twbs4。詳細は説明しません。使用方法については、プラグインのドキュメントに従ってください。ブートストラップ 4 を laravel5.5 より前のバージョンに統合する場合でも、次のプロセスを実行する必要があります。
package.json
から削除し、app.scss で
npm install
<pre class="brush:php;toolbar:false;">npm install bootstrap@4.0.0-beta popper.js --save-dev</pre>
(3) ブートストラップ js ファイルをコンパイルします ファイルをパブリック ディレクトリにコピーして参照しますが、ブートストラップ 4 の js コンポーネントも jquery
と Popper.js
に依存しているため、実際にはこれは不可能です。はデフォルトです。 bootstrap.min.js
ファイルはコンパイルされません。 方法 1 では、
現時点では、次の行を に追加する必要があります。 <pre class="brush:php;toolbar:false;">//替换掉之前bootstrap-sass的引入
//如果你是laravel 5.5及以后的版本,这里的node_modules换成~符号
@import "node_modules/bootstrap/scss/bootstrap";</pre>
メソッドを通じて 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
ファイルでは、実際には次のように書くことができます: <pre class="brush:php;toolbar:false;">mix.autoload({
jquery: [&#39;$&#39;, &#39;window.jQuery&#39;,"jQuery","window.$","jquery","window.jquery"],
&#39;popper.js/dist/umd/popper.js&#39;: [&#39;Popper&#39;]
});
mix.js([
&#39;node_modules/bootstrap/dist/js/bootstrap.min.js&#39;
],&#39;public/js/bootstrap.min.js&#39;)</pre>
最終的な圧縮ファイルは同じです。 npm run dev
を使用してコンパイルすると、2 番目の方法で圧縮されたファイルは小さくなりますが、実稼働環境、つまり
の場合、サイズは小さくなります。両方とも同じになります。 もちろん、2 番目の方法には、記述する行が 1 行少なくなることに加えて、別の利点もあります。それは、最初に
npm install Popper.js
を行う必要がないことです。理解しやすく、ダウンロードの必要性も少なくて済みます。
(4) ブートストラップ 4 のページネーション ブレードをロードする この時点で、実際にブートストラップ 4 のドキュメントに従ってブレード ビューで使用することも、既存のブートストラップ 3 を使用することもできます。ブートストラップ 3 を 4 に変更するのは、これがブートストラップの比較的破壊的なアップグレードであるため、下位互換性がないためです。プロジェクトのサイズによって異なりますが、一般的に、ブートストラップ 3 を 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 ドキュメントに次のように書かれているように、ページングをレンダリングするたびに特定のページング ビュー ファイルを指定することもできます。
<pre class="brush:php;toolbar:false;">default.blade.php
bootstrap-4.blade.php
simple-default.blade.php
simple-bootstrap-4.blade.php</pre>
しかし、これは面倒すぎるので、知っておいてください。 。
以上がLaravel と Bootstrap 4 を統合するための完全なソリューションを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。