Share the complete solution for integrating Laravel with Bootstrap 4

The following column Laravel Tutorial will introduce you to the complete solution of integrating Laravel with Bootstrap 4. I hope it will be helpful to friends in need!

Update on January 23, 2018: If you want to use bootstrap 4 directly on laravel5.5, this should be relatively wise, because the final version of bootstrap 4 has been released, then here is The good news is that you don’t need to follow the steps below step by step. You can quickly use boostrap 4 by installing a plug-in. The plug-in link: laravelnews/laravel-twbs4. I won’t go into details on how to use it. Follow the plug-in documentation. Just carry on. If you are integrating bootstrap 4 in a version before laravel5.5, then 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

willbootstrap-sassDelete it from package.json, and then execute npm install

(2) in your app.scss Introduce a new bootstrap sass file into the file

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

(3) Compile the bootstrap js file

In this step you may want to directly copy 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, which are default The bootstrap.min.js file is not compiled.

Method 1 uses bootstrap.min.js to compile

At this time we need to add these 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')

You can see that we automatically load jquery and Popper.js through the mix.autoload() method, so below When the mix.js() method compiles the bootstrap.min.js file, the corresponding dependencies are compiled in. Finally, we send the compiled file to public/js/ directory, and then call it where needed.

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

If you go to bootstrap’s node_modules/bootstrap/dist/js/ directory Next, you will find that there is another bootstrap.bundle.min.js file. In fact, Popper.js has been pre-compiled in this file, but there is no jquery , so in the webpack.mix.js file just now, we can actually 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 to compile, then the file compressed by the second method will be smaller, but if it is in the production environment, that is, npm run production, then the size of both will be the same .

Of course, in addition to writing one less line, the second method also has another advantage, that is, at the beginning, there is no need to npm install popper.js. It is understandable and requires less downloading. Just a component.

(4) Load the pagination blade of bootstrap 4

At this point, you can actually use it in the blade view according to the bootstrap 4 document, or use the existing bootstrap 3 Changing it to 4 is because this is a relatively disruptive upgrade of bootstrap, so it is not backward compatible. It depends on the size of your project, but generally speaking, changing bootstrap 3 to 4 will take a while.

I won’t go into details. What you may be confused about during this period is how to upgrade the paging style of bootstrap 4. There are many methods. Here is the simplest and fastest one:

First of all, find you The resources/views/vendor/pagination directory, this is laravel’s default paging style view file. If you don’t execute php artisan vendor:publish, it will be there

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

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

You can see that laravel has actually prepared the bootstrap 4 paging template file for us by default. The simplest thing at this time is to change the file name. The previous default.blade is the original bootstrap 3 , so we can change it to bootstrap-3.blade.php, and then change bootstrap-4.blade to the default default.blade, In this way, laravel will use the 4 style when loading pagination.

Of course, you can also specify a specific paging view file every time you render a paging, as the laravel documentation says, such as:

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

But this is too troublesome, just know it.

The above is the detailed content of Share the complete solution for integrating Laravel with Bootstrap 4. For more information, please follow other related articles on the PHP Chinese website!