为 Laravel 启用 Bootstrap 4

Posted 2022-12-09 petewell

尽管 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 [email?protected]^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 就配置完毕了

原文:大专栏  为 Laravel 启用 Bootstrap 4