Partagez la solution complète pour intégrer Laravel avec Bootstrap 4

La colonne suivante du Tutoriel Laravel vous présentera la solution complète d'intégration de Laravel avec Bootstrap 4. J'espère qu'elle sera utile à ceux qui en ont besoin !

Mise à jour le 23 janvier 2018 : Si vous souhaitez utiliser bootstrap 4 directement sur laravel5.5, cela devrait être relativement judicieux, car la version finale de bootstrap 4 est sortie, alors voici le la bonne nouvelle est que 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. Je n'entrerai pas dans les détails. pour savoir comment l'utiliser. Suivez 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) Installez bootstrap et les dépendances correspondantes

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

bootstrap-sassSupprimez de package.json, puis exécutez npm install

(2) Introduisez le nouveau fichier sass bootstrap app.scss

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

(3) Compilez dans votre fichier

le fichier js de bootstrap

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

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

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

Comme vous pouvez le voir, nous utilisons le Charge automatiquement mix.autoload() et jquery, de sorte que lorsque la méthode Popper.js compile le fichier mix.js() ci-dessous, les dépendances correspondantes soient compilées. Enfin, nous envoyons le fichier compilé dans le répertoire bootstrap.min.js, puis appelez-le partout où vous en avez besoin. public/js/

La méthode 2 utilise

pour compiler bootstrap.bundle.min.js

Si vous allez dans le répertoire

de bootstrap, vous constaterez qu'il existe un autre fichier node_modules/bootstrap/dist/js/, qui a en fait été pré- compilebootstrap.bundle.min.js entre, mais il n'y a pas de Popper.js, donc dans le fichier jquery à l'instant, on peut en fait l'écrire comme ceci : 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')

Les fichiers compressés finaux sont les mêmes, si vous utilisez

pour compiler, alors le fichier compressé par la deuxième méthode sera plus petit, mais s'il se trouve dans un environnement de production, c'est-à-dire npm run dev, alors la taille des deux sera la même. npm run production

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'y a pas besoin de

C'est compréhensible et elle n'en nécessite qu'une de moins. composant à télécharger. npm install popper.js

(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 votre répertoire

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

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

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

Vous pouvez voir que Laravel a. En fait, la pagination bootstrap 4 a été préparée pour nous par défaut. Fichier modèle, le plus simple pour le moment est de changer le nom du fichier. Le

précédent est le bootstrap 3 d'origine, nous pouvons donc le changer en default.blade, puis le changer. bootstrap-3.blade.php à la valeur par défaut bootstrap-4.blade, afin que Laravel utilise le style 4 lors du chargement de la pagination. default.blade

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

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

Mais c'est trop gênant, sachez-le.

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!