Laravel integrates the full Bootstrap 4 solution (recommended), laravelbootstrap

Laravel integrates the full Bootstrap 4 solution (recommended), laravelbootstrap

If you want to use bootstrap 4 directly on laravel5.5, it should be wise, because the final version of bootstrap 4 has been released, so there is good news here, that is, you do not need to step by step to execute the following steps, you can install a plug-in to quickly use boostrap 4, plug-in link: laravelnews/laravel-twbs4, how to use the specific will not go into details, follow the plug-in document. If you integrate bootstrap 4 in laravel5.5, you still need to go through the following process:

(1) install bootstrap and corresponding Dependencies

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

SetBootstrap-sassSlavePackage. jsonAnd then executeNpm install

(2) introduce the new bootstrap sass file in your app. scss File

// Replace the previous bootstrap-sass introduction // If You Are laravel 5.5 or later, replace node_modules here ~ Symbol @ import "node_modules/bootstrap/scss/bootstrap ";

(3) Compile the js file of bootstrap

In this step, you may want to copy yourBootstrap. min. jsFile to the public directory, and then reference, but in fact this is not the case, because the js component of bootstrap 4 also depends on jquery andPopper. js, DefaultBootstrap. min. jsThe file is not compiled.

Method 1 use bootstrap. min. js to compile

In this case, we need to add the following lines in 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')

We can see thatMix. autoload ()Automatic Method LoadingJqueryAndPopper. jsIn this way, the corresponding dependencies are compiled when the following mix. js () method is used to compile the bootstrap. min. js file. Finally, the compiled file is sentPublic/js/Directory, and then call it as needed.

Method 2 use bootstrap. bundle. min. js to compile

If you go to bootstrap'sNode_modules/bootstrap/dist/js/Directory, you will find another bootstrap. bundle. min. js file, which has already compiled Popper in advance. js, but there is no jquery, so the webpack just now. mix. in the js file, we can also write it like this:

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

The final compressed files are the same. If you use npm run dev for compilation, the files compressed in the second method should be smaller, but if the files are in the production environment, that isNpm run production, The sizes of the two are the same.

Of course, in addition to writing less lines, the second method also has the advantage of removing the needNpm install popper. jsNo, it is understandable that only a few components are downloaded.

(4) load the pagination blade of bootstrap 4)

So far, you can follow the bootstrap 4 document to actually use the blade view, or change the existing bootstrap 3 to 4, because this is a relatively disruptive upgrade of bootstrap, therefore, downward compatibility is not supported. It depends on the size of your project. However, it may take a while to change bootstrap 3 to 4.

I will not talk much about it. What may be confusing during this period is how to upgrade the pagination style of bootstrap 4. There are also many methods. Here we provide the simplest and fastest:

First, find yourresources/views/vendor/pagination Directory. This is the default paging style View File of laravel.php artisan vendor:publish Now.

default.blade.phpbootstrap-4.blade.phpsimple-default.blade.phpsimple-bootstrap-4.blade.php

We can see that laravel has prepared the pagination template file for bootstrap 4 by default. In this case, the simplest thing is to change the file name.Default. bladeIs the original bootstrap 3, so we can change itBootstrap-3.blade.phpAnd then change the bootstrap-4.blade to the defaultDefault. bladeIn this way, laravel uses the 4 style when loading pages.

You can also specify a specific paging view file for each rendering page, as described in the laravel document. For example:

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

But this is too troublesome. You just need to know.

Summary

The above is the complete solution of Laravel integrating Bootstrap 4 introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!