Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how Laravel integrates Bootstrap4". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "Laravel how to integrate Bootstrap4" can help you solve the problem.

(1) install bootstrap and corresponding dependencies

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

Remove the bootstrap-sass from the package.json before performing the npm install

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

/ / replace the previous introduction of bootstrap-sass / / if you are laravel 5.5 or later, the node_modules here will be replaced with the symbol @ import "node_modules/bootstrap/scss/bootstrap"

(3) compile the js file of bootstrap

At this step you may want to directly copy a copy of your bootstrap.min.js file to the public directory and then reference it, but in fact this is not possible, because the js component of bootstrap 4 also relies on jquery and Popper.js, and the default bootstrap.min.js file is not compiled.

Method one uses bootstrap.min.js to compile

At this point, we need to add a few lines to 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')

As you can see, we automatically load jquery and Popper.js through the mix.autoload () method, so that the corresponding dependencies are compiled when the bootstrap.min.js file is compiled by the mix.js () method below. Finally, we send the compiled file to the public/js/ directory and call it where needed.

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

If you go to the node_modules/bootstrap/dist/js/ directory of bootstrap, you will find that there is also a bootstrap.bundle.min.js file in which Popper.js is pre-compiled, but there is no jquery, so we can actually write this in the webpack.mix.js file just now:

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 are compiled with npm run dev, then the second method of compressed files is smaller, but if it is to the production environment, that is, npm run production, then both are the same size.

Of course, in addition to writing one line less, the second method has another advantage, that is, at the beginning, there is no need for npm install popper.js, which is understandable, just download fewer components.

(IV) load the paged view of bootstrap 4 (pagination blade)

At this point, you can actually use the bootstrap 4 document in the blade view, or change the existing bootstrap 3 to 4, because this is a relatively subversive upgrade of bootstrap, so it is not compatible down, depending on the size of your project, but generally speaking, it takes a while to change bootstrap 3 into 4.

Without talking about the details, what may be confusing during this period is how to upgrade the paging style of bootstrap 4, and there are many ways to upgrade it. Here is the easiest and fastest one:

First, find your resources/views/vendor/pagination directory, which is laravel's default paging style view file, if you don't execute php artisan vendor:publish

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

You can see that laravel has actually prepared the bootstrap 4 paging template file for us by default, at this time the simplest thing is to change the name of the file, the previous default.blade is the original bootstrap 3, so we can change it to bootstrap-3.blade.php, and then change the bootstrap-4.blade to the default default.blade, so that laravel loads pages with a 4 style.

Of course, you can also specify a specific paging view file each time you render a page, as stated in the laravel document, such as:

$paginator- > links ('vendor.pagination.bootstrap-4') on "how Laravel integrates Bootstrap4" ends here. Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.