How to integrate Bootstrap 4 in Laravel?

This article mainly introduces the complete solution of Laravel integrating Bootstrap 4. It is very good and has reference value. Friends in need can refer to it

[Related video recommendations: Bootstrap tutorial 】

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, so here is good news, That is, 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. Just follow the plug-in documentation. . 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

Replace bootstrap -sass Delete from package.json, and then execute npm install

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

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

(3) Compile bootstrap js file

In this step you may want to directly copy a copy of your bootstrap.min.js file to 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 does not Compile it in.

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 that the mix.js below () method compiles the corresponding dependencies when compiling the bootstrap.min.js file. Finally, we send the compiled file to the public/js/ directory, and then call it where needed. Can.

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

If you go to bootstrap’s node_modules/bootstrap/dist/ In the js/ directory, you will find another bootstrap.bundle.min.js file. Popper.js has actually 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 files compressed by the second method will be smaller, but if When it comes to the production environment, that is, npm run production , then the sizes of both are 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 . There is nothing wrong with it. Download less. 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 , you will have it

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 , so that when laravel loads paging The style used is 4.

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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Explain in detail the issue of implementing react server rendering

How to write a PC-side carousel chart using jquery (details Tutorial)

How to develop through the header component in Vue (detailed tutorial)

The above is the detailed content of How to integrate Bootstrap 4 in Laravel?. For more information, please follow other related articles on the PHP Chinese website!