Teilen Sie die Komplettlösung für die Integration von Laravel mit Bootstrap 4

In der Kolumne „Laravel-Tutorial“ wird Ihnen die Komplettlösung zur Integration von Laravel mit Bootstrap 4 vorgestellt. Ich hoffe, dass sie Freunden, die sie benötigen, hilfreich sein wird! Update vom 23. Januar 2018: Wenn Sie Bootstrap 4 direkt auf Laravel5.5 verwenden möchten, sollte dies relativ klug sein, da die endgültige Version von Bootstrap 4 veröffentlicht wurde. Dann sind hier die guten Nachrichten für Sie Sie müssen die folgenden Schritte nicht Schritt für Schritt ausführen. Sie können Boostrap 4 schnell verwenden. Der Plug-In-Link: laravelnews/laravel-twbs4 Folgen Sie der Plug-in-Dokumentation. Wenn Sie Bootstrap 4 in einer Version vor Laravel 5.5 integrieren, müssen Sie noch den folgenden Prozess durchlaufen:

(1) Bootstrap und entsprechende Abhängigkeiten installieren

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

Ersetzen Sie bootstrap-sass durch Löschen Sie es aus package.json und führen Sie dann npm install aus

(2) Fügen Sie einen neuen Bootstrap in Ihre app.scss-Datei-Sass-Datei ein

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

(3) Kompilieren Sie die Bootstrap-JS-Datei bootstrap-sass从package.json中删除，然后再执行npm install

（二）在你的app.scss文件中引入新的bootstrap的sass文件

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

（三）编译bootstrap的js文件

在这一步可能你会想直接复制一份你的bootstrap.min.js文件到public目录，然后引用，但实际上这样是不行的，因为bootstrap 4的js组件还依赖和Popper.js,默认的bootstrap.min.js文件并没有编译进去。

方法一 使用bootstrap.min.js来编译

这个时候我们需要在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')

可以看到，我们通过mix.autoload()方法自动加载和Popper.js，这样在下面mix.js()方法编译bootstrap.min.js文件的时候就把相应的依赖编译进去了，最后我们将编译好的文件发送到了public/js/目录下，然后在需要的地方调用即可。

方法二 使用bootstrap.bundle.min.js来编译

如果你到bootstrap的node_modules/bootstrap/dist/js/目录下，会发现还有一个bootstrap.bundle.min.js文件，这个文件里其实已经预先编译了Popper.js进去，但是没有，所以刚才的webpack.mix.js文件里，我们其实也可以这样来写：

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

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

最终压缩出来的文件都是一样的，如果你是用npm run dev来编译，那么第二种方法压缩出来的文件要小一点，但如果是到了生产环境，也即npm run production,那么两者的大小都是一样的。

当然，第二种方法除了少写一行，还有一个好处，就是在最开始的时候，就不需要npm install popper.js了，无可厚非了，少下载个组件而已。

（四）加载bootstrap 4的分页视图（pagination blade）

至此，大家就可以按照bootstrap 4文档在blade视图中实际使用了，或者将已有的bootstrap 3的改成4的，因为这是bootstrap的一次相对颠覆性的升级，所以无法向下兼容，取决于你的项目大小，但一般而言将bootstrap 3的改成4是需要费一阵子功夫的。

具体的不多谈，这期间可能比较困惑的就是如何升级bootstrap 4的分页样式，方法也很多，这里提供一个最简单最快速的：

首先，找到你的resources/views/vendor/pagination目录，这是laravel默认的分页样式视图文件，如果没有执行一下php artisan vendor:publish就有了

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

可以看到laravel其实默认就已经为我们准备好了bootstrap 4的分页模板文件，这个时候最简单的就是改一下文件名字即可，之前的default.blade就是原来的bootstrap 3的，所以我们可以将其改成bootstrap-3.blade.php，然后将bootstrap-4.blade改成默认的default.blade

In diesem Schritt möchten Sie möglicherweise Ihre bootstrap.min.js-Datei direkt in das öffentliche Verzeichnis kopieren und dann darauf verweisen, aber tatsächlich Dies ist nicht möglich, da die js-Komponente von Bootstrap 4 auch auf und Popper.js basiert, die Standarddatei bootstrap.min.js jedoch nicht Es ist nicht kompiliert.

Methode 1 verwendet bootstrap.min.js zum Kompilieren

Zu diesem Zeitpunkt müssen wir dies zu webpack.mix.js hinzufügen code> Ein paar Zeilen: <p>rrreee</p>Sie können sehen, dass wir <code>jquery und Popper.js automatisch über die Methode mix.autoload() laden , also wie folgt: Wenn die Methode mix.js() die Datei bootstrap.min.js kompiliert, werden die entsprechenden Abhängigkeiten einkompiliert. Schließlich senden wir die kompilierte Datei an public/js/ Verzeichnis und rufen Sie es dann bei Bedarf auf. 🎜

Methode 2 verwendet bootstrap.bundle.min.js zum Kompilieren

🎜Wenn Sie zu Bootstraps node_modules/bootstrap/dist/js/ finden Sie eine weitere Datei <code>bootstrap.bundle.min.js. Tatsächlich wurde Popper.js in dieser Datei vorkompiliert, aber Es gibt keinen code>jquery, also können wir es in der Datei webpack.mix.js gerade so schreiben: 🎜rrreee🎜Die endgültigen komprimierten Dateien sind die Das Gleiche gilt, wenn Sie zum Kompilieren npm run dev verwenden. Die mit der zweiten Methode komprimierte Datei ist kleiner. Wenn sie sich jedoch in einer Produktionsumgebung befindet, wird npm run dev ausgeführt , dann sind beide Größen gleich. 🎜🎜Natürlich hat die zweite Methode neben dem Schreiben einer Zeile weniger auch einen weiteren Vorteil: Am Anfang ist kein npm install popper.js erforderlich Es ist nur eine Komponente weniger zum Herunterladen erforderlich. 🎜🎜 (4) Laden Sie das Paginierungsblatt von Bootstrap 4🎜🎜An diesem Punkt können Sie es tatsächlich in der Blattansicht gemäß dem Bootstrap 4-Dokument verwenden oder das vorhandene Bootstrap 3 in 4 ändern, da dies ein relativer Bootstrap ist Dies ist ein störendes Upgrade, daher ist es nicht abwärtskompatibel. Es hängt von der Größe Ihres Projekts ab, aber im Allgemeinen wird es eine Weile dauern, Bootstrap 3 auf 4 zu ändern. 🎜🎜Ich werde in dieser Zeit nicht auf Details eingehen, worüber Sie möglicherweise verwirrt sind, wie Sie den Paging-Stil von Bootstrap 4 aktualisieren können. Hier ist die einfachste und schnellste Methode: 🎜🎜Suchen Sie zuerst Ihr resources/views/vendor/pagination, dies ist die standardmäßige Paginierungsstil-Ansichtsdatei. Wenn Sie php artisan seller:publish nicht ausführen, wird sie dort angezeigt 🎜Sie können sehen, dass Laravel tatsächlich die Paging-Vorlagendatei für Bootstrap 4 vorbereitet hat. Am einfachsten ist es derzeit, den Dateinamen zu ändern. Der vorherige default.blade ist der ursprüngliche Bootstrap 3, also können wir es in bootstrap-3.blade.php ändern und dann bootstrap-4.blade in den Standardwert default.blade ändern >, sodass beim Laden von Paging durch Laravel der verwendete Stil 4 ist. 🎜🎜Natürlich können Sie, wie es in der Laravel-Dokumentation heißt, jedes Mal, wenn Sie eine Paginierung rendern, eine bestimmte Paging-Ansichtsdatei angeben, wie zum Beispiel: 🎜rrreee🎜Aber das ist zu mühsam, wissen Sie es einfach. 🎜

Das obige ist der detaillierte Inhalt vonTeilen Sie die Komplettlösung für die Integration von Laravel mit Bootstrap 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!