为 Laravel 启用 Bootstrap 4

尽管 Laravel 已经推出到 5.5 版本,但其默认的 Bootstrap 组件仍然是 3 的版本,而 Bootstrap 4 已经 Beta 很长一段时间,或许因为不是正式版 Laravel 并没有集成新版本,但我们完全可以手动把版本更换成 4.0。

以下内容对应 Laravel 5.5 版本

首先需要卸载默认的 Bootstrap 组件,在工程根目录下执行
npm uninstall --save-dev bootstrap-sass
然后安装新的 Bootstrap
npm install --save-dev bootstrap@^4.0.0-beta.3 popper.js
截止目前 Bootstrap 最新版本是v4.0.0-beta.3,最新版本留意官网,注意新版本的需要popper.js执行一些如下拉菜单弹出的操作,务必安装此模块。

打开resources/assets/js/bootstrap.js,把

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

替换成

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    
    require('bootstrap');
} catch (e) {}

此步骤将旧的 Bootstrap 引用变更为新版本的路径。

打开resources/assets/sass/app.scss,将
@import "~bootstrap-sass/assets/stylesheets/bootstrap";
更改为
@import "~bootstrap/scss/bootstrap.scss";

打开resources/assets/sass/_variables.scss,将
$font-size-base: 14px;
一行注释或删除

这样 Bootstrap 4 For Laravel 就配置完毕了