Laravel 集成 Bootstrap 4 完整解决方案

（1）安装 bootstrap 及相应依赖

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

从

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

删除 bootstrap-sass ，然后安装 nn （2）引入新的 bootstrap Put在文件中到您的 文件

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

(3) 编译 bootstrap js 文件

在这一步中，您可能需要将您的 文件直接复制到 public 文件夹中。所以引用一下，但实际上是不可能的，因为bootstrap 4中的js组件还依赖于jquery和而默认文件没有被编译进去。Meth❀1来编译

此时我们需要将这些行添加到：

({    jquery: ['$', '',"jQuery","window.$","jquery",""],        '': ['Popper']});([        'node_modules/bootstrap/dist/js/'        ],'public/js/')

如您所见，我们通过方法自动加载。 jquery和，所以当()方法编译下面的文件时，会编译文件对应的依赖，发送编译后的。 js/ 库，然后在需要的地方调用它。

方法二使用编译

如果进入node_modules/bootstrap/dist/js/Bootstrap目录，你会发现多了一个-文件。这个文件实际上包含已经预编译过的，但是没有jquery，所以现在在文件中我们实际上可以这样写： 压缩文件是相同的，如果你使用npm run dev来编译，那么第二种方法压缩出来的文件会比较小，但是如果在生产环境，即。 npm 运行生产，则两个尺寸相同。

不用少写一行，当然第二种方法还有一个好处，就是一开始就不需要npm install popper.js。这是可以理解的。这只是少了一个需要下载的组件。 。

（4）在bootstrap 4上加载分页sheet

此时，你实际上可以根据bootstrap 4文档在sheet视图中使用它，或者将现有的bootstrap 3更改为4，因为这是一个相对bootstrap 的破坏性升级，因此不向后兼容。这取决于你的项目的大小，但一般将bootstrap 3更改为4会需要一段时间。

我不再赘述。这时候你可能会困惑的是如何在Bootstrap 4中升级分页样式。方法有很多。这是最简单、最快的：

首先，找到你的 resources/views/vendor/pagination 文件夹，这是 laravel 默认的分页样式视图文件。如果不执行 php artisanvendor:publish 就会有

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

可以看到 laravel 已经默认设置好了。我们已经准备好了bootstrap 4的分页模板文件，此时最简单的就是更改文件名。之前的是原来的bootstrap 3，所以我们可以将其更改为，然后将更改为默认的，这样laravel在加载分页时将使用4样式。

当然，正如laravel文档所说，你可以在每次渲染分页时指定一个特定的pageview文件，比如：

$paginator->links('')

但是太麻烦了，知道就好。