Wie integriere ich Bootstrap 4 in Laravel?

In diesem Artikel wird hauptsächlich die Komplettlösung von Laravel vorgestellt, die Bootstrap 4 integriert. Sie ist sehr gut und hat Referenzwert. Freunde in Not können sich darauf beziehen

[Ähnliche Videoempfehlungen: Bootstrap Tutorial 】

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. Hier sind also gute Neuigkeiten Das heißt, Sie müssen die folgenden Schritte nicht Schritt für Schritt ausführen, indem Sie ein Plug-In installieren: laravelnews/laravel-twbs4 Befolgen Sie einfach die Plug-in-Dokumentation. Wenn Sie Bootstrap 4 in einer Version vor Laravel 5.5 integrieren, müssen Sie dennoch 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 Aus package.json entfernen und dann npm install

ausführen (2) Fügen Sie einen neuen Bootstrap in Ihre app.scss-Datei ein, sas-Datei

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

(3) Bootstrap-JS-Datei kompilieren

In diesem Schritt möchten Sie möglicherweise Ihre Bootstrap.min.js -Datei direkt in ein öffentliches Verzeichnis kopieren und dann darauf verweisen, aber Tatsächlich ist dies nicht möglich, da die js-Komponente von Bootstrap 4 auch auf jquery und Popper.js basiert und die Standarddatei bootstrap.min.js sie nicht kompiliert.

Methode 1 verwendet bootstrap.min.js zum Kompilieren

Zu diesem Zeitpunkt müssen wir diese Zeilen zu webpack.mix.js hinzufügen:

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

Sie können sehen, dass wir jquery und Popper.js automatisch über die Methode mix.autoload() laden, sodass unten gemischt wird Die .js()-Methode kompiliert die entsprechenden Abhängigkeiten beim Kompilieren der Datei bootstrap.min.js. Schließlich senden wir die kompilierte Datei an das Verzeichnis public/js/ und rufen sie dann bei Bedarf auf.

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

Wenn Sie zu Bootstraps node_modules/bootstrap/dist/ gehen Im Verzeichnis js/ finden Sie eine weitere Datei namens „bootstrap.bundle.min.js“, die tatsächlich in dieser Datei vorkompiliert wurde, aber es gibt keine jquery, also in der Datei „webpack.mix.js“. gerade jetzt, Wir können es tatsächlich so schreiben:

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

Die endgültigen komprimierten Dateien sind dieselben. Wenn Sie zum Kompilieren npm run dev verwenden, sind die mit der zweiten Methode komprimierten Dateien kleiner, aber wenn Wenn es um die Produktionsumgebung geht, das heißt npm run production , dann sind die Größen beider gleich.

Natürlich hat die zweite Methode neben dem Schreiben einer Zeile weniger noch einen weiteren Vorteil: Am Anfang ist keine npm-Installation von popper.js erforderlich Daran ist nichts auszusetzen. Weniger herunterladen. Nur eine Komponente.

(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 verwenden auf 4 liegt daran, dass dies ein relativ störendes Upgrade von Bootstrap ist und daher nicht abwärtskompatibel ist. Dies hängt von der Größe Ihres Projekts ab, aber im Allgemeinen wird der Wechsel von Bootstrap 3 auf 4 eine Weile dauern.

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. Es gibt viele Methoden:

Suchen Sie zunächst Ihr resources/views/vendor/pagination -Verzeichnis. Dies ist die Standardansichtsdatei für den Paging-Stil. Wenn Sie php artisan vendor:publish nicht ausführen, wird dort

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

angezeigt Tatsächlich ist es für uns standardmäßig eine Bootstrap-4-Paging-Datei. Am einfachsten ist es derzeit, den Dateinamen zu ändern. Die vorherige default.blade ist die ursprüngliche Bootstrap 3, sodass wir sie in bootstrap-3.blade.php und ändern Sie dann bootstrap-4.blade in den Standardwert default.blade , damit Laravel beim Laden von Paging den 4-Stil verwendet.

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:

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

Aber das ist zu mühsam, wissen Sie es einfach.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Erklären Sie ausführlich das Problem der Implementierung des React-Server-Renderings

Wie man mit JQuery eine PC-Seite schreibt Karusselldiagramm (detailliertes Tutorial)

So entwickeln Sie über die Header-Komponente in Vue (detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonWie integriere ich Bootstrap 4 in Laravel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!