Comment intégrer Bootstrap 4 dans Laravel ?

Cet article présente principalement la solution complète de Laravel intégrant Bootstrap 4. Il est très bien et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

[Recommandations vidéo associées : Bootstrap. tutoriel ]

Si vous souhaitez utiliser bootstrap 4 directement sur laravel5.5, cela devrait être relativement judicieux, car la version finale de bootstrap 4 est sortie, voici donc une bonne nouvelle , Autrement dit, vous n'avez pas besoin de suivre les étapes ci-dessous étape par étape. Vous pouvez utiliser rapidement boostrap 4 en installant un plug-in : laravelnews/laravel-twbs4. pour savoir comment l'utiliser. Suivez simplement la documentation du plug-in. Si vous intégrez bootstrap 4 dans une version antérieure à laravel 5.5, alors vous devez toujours suivre le processus suivant :

(1) Installer bootstrap et les dépendances correspondantes

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

Remplacer bootstrap-sass Supprimez-le de package.json, puis exécutez npm install

(2) Introduisez un nouveau contenu dans votre fichier app.scss Le fichier sass bootstrap

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

(3) Compilez le fichier bootstrap js

Dans cette étape, vous souhaiterez peut-être copier directement votre fichier bootstrap.min.js dans le répertoire public puis y faire référence, mais en fait cela n'est pas possible car le composant js de bootstrap 4 s'appuie également sur jquery et Popper.js , et le par défaut bootstrap.min.js Le fichier n'est pas compilé.

La méthode 1 utilise bootstrap.min.js pour compiler

À ce stade, nous devons ajouter ces lignes à 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')

Vous pouvez voir que nous chargeons automatiquement jquery et Popper.js via la méthode mix.autoload() , donc mélangez ci-dessous La méthode .js() compile les dépendances correspondantes lors de la compilation du fichier bootstrap.min.js Enfin, nous envoyons les fichiers compilés dans le répertoire public/js/ , puis les plaçons là où c'est nécessaire. il.

La méthode 2 utilise bootstrap.bundle.min.js pour compiler

Si vous accédez au node_modules/bootstrap/dist/ de bootstrap Dans le répertoire js/ , vous trouverez un autre fichier bootstrap.bundle.min.js. Popper.js a effectivement été pré-compilé dans ce fichier, mais il n'y a pas de jquery, donc dans le fichier webpack.mix.js. pour le moment, nous pouvons en fait l'écrire comme ceci :

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

Les fichiers compressés finaux sont les mêmes. Si vous utilisez npm run dev pour compiler, alors les fichiers compressés par la deuxième méthode seront plus petits. si c'est dans l'environnement de production, c'est-à-dire npm run production , alors les tailles des deux seront les mêmes.

Bien sûr, en plus d'écrire une ligne de moins, la deuxième méthode a aussi un autre avantage, c'est-à-dire qu'au début, il n'est pas nécessaire de npm installer popper.js Là. Il n'y a rien de mal à cela. Téléchargez moins.

(4) Charger la lame de pagination du bootstrap 4

À ce stade, vous pouvez réellement l'utiliser dans la vue lame selon le document bootstrap 4, ou utiliser le bootstrap 3 existant en le modifiant vers 4 est dû au fait qu'il s'agit d'une mise à niveau relativement perturbatrice du bootstrap, elle n'est donc pas rétrocompatible. Cela dépend de la taille de votre projet, mais d'une manière générale, changer le bootstrap 3 en 4 prendra un certain temps.

Je n'entrerai pas dans les détails. Ce qui pourrait vous dérouter pendant cette période, c'est comment mettre à niveau le style de pagination de bootstrap 4. Il existe de nombreuses méthodes. Voici la plus simple et la plus rapide :

.

Tout d'abord, trouvez-vous Le répertoire resources/views/vendor/pagination est le fichier de vue de style de pagination par défaut de Laravel. Si vous n'exécutez pas php artisan vendor:publish , il y aura

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

Vous pouvez voir ce laravel. a en fait préparé le fichier de modèle de pagination bootstrap 4 pour nous, le plus simple pour le moment est de changer le nom du fichier default.blade est le bootstrap 3 d'origine, nous pouvons donc le changer en. bootstrap-3.blade.php , puis modifiez bootstrap-4.blade par défaut default.blade , afin que Laravel utilise le style 4 lors du chargement de la pagination.

Bien sûr, vous pouvez également spécifier un fichier de vue de pagination spécifique à chaque fois que vous effectuez le rendu d'une pagination, comme le dit la documentation de Laravel, par exemple :

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

Mais c'est trop gênant une fois. tu le sais, Can.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Expliquez en détail le problème de l'implémentation du rendu du serveur React

Comment utiliser jquery pour écrire un côté PC graphique carrousel (tutoriel détaillé)

Comment développer via le composant d'en-tête dans Vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!