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 :
npm install bootstrap@4.0.0-beta popper.js --save-dev
bootstrap-sass
Supprimez de package.json
, puis exécutez npm install
app.scss
//替换掉之前bootstrap-sass的引入 //如果你是laravel 5.5及以后的版本,这里的node_modules换成~符号 @import "node_modules/bootstrap/scss/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.
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 < Méthode 🎜> 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/
bootstrap.bundle.min.js
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')
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
C'est compréhensible et elle n'en nécessite qu'une de moins. composant à télécharger. npm install popper.js
.
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
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
$paginator->links('vendor.pagination.bootstrap-4')
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!