为 Laravel 启用 Bootstrap 4
尽管 Laravel 已经推出到 5.5 版本,但其默认的 Bootstrap 组件仍然是 3 的版本,而 Bootstrap 4 已经 Beta 很长一段时间,或许因为不是正式版 Laravel 并没有集成新版本,但我们完全可以手动把版本更换成 4.0。
以下内容对应 Laravel 5.5 版本
首先需要卸载默认的 Bootstrap 组件,在工程根目录下执行npm uninstall --save-dev bootstrap-sass
然后安装新的 Bootstrapnpm 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 就配置完毕了