Laravel 5 前端预设 Bootstrap 4

本文翻译整理自 Bootstrap 4 Laravel Preset for Laravel 5.5

Paul Redmond 为我们带来了一个新的前端预处理 Package: laravel-bootstrap4

这个 Package 可以让你很方便的在 Laravel 5.5 中使用 Bootstrap 4 的 beta 版本。它包括了 SCSS 文件的脚手架,导入了 Bootstrap 4 的 JavaScript 插件,jQuery 和 Popper.js。并且保留了随 Laravel 提供的 jQuery 依赖关系,但根据 Bootstrap 文档,可以使用 jQuery slim 版本代替。

简介

Bootstrap 4 前端预设类似于默认随 Laravel 提供的当前 Bootstrap 3 脚手架,Bootstrap 4 的变量和标记为您提供了一个很好的起点。当Bootstrap 4的最终版本发布后,您将能够更顺利地更新您的项目。

安装

由于 Laravel 5.5 新添加了包自动发现功能,安装 Laravel Bootstrap 4 前端预设 只需要下面这一行命令 :

$ composer require laravelnews/laravel-twbs4

然后执行 Package 注册的预设命令:

$ php artisan preset bootstrap4-auth

当然,如果您不需要 auth 视图,则可以执行另外一条预设命令:

$ php artisan preset bootstrap4

最后你需要安装依赖并且进行编译,就可以使用它啦~

$ yarn && yarn dev

or

$ npm install && npm run dev

使用

Laravel 5.5 提供了一个预设的命令 (preset),使您能够更改前端脚手架甚至删除它。我们的 Package 注册了两个预设命令,他们分别是 bootstrap4 以及 bootstrap4-auth,以便为您提供更多的灵活性。

当您运行 Bootstrap 4 注册的预设命令时,它将删除 bootstrap-sass 节点模块,并添加 bootstrappopper.js 节点模块。bootstrap.js 除了全局的 Popper.js 导入,还有就是对各种 Bootstrap 4 JavaScript 插件的新的依赖关系,我们的预设与 Bootstrap 4 的默认设置是相同的。

执行预设命令后的 app.scss 文件保留了 Raleway 的 Google 字体,并导入了一个更新的 _variables.scss 文件,为您的自定义CSS提供了一个很好的起点。

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

这个 _variables.scss 文件相较于默认的 Laravel 版本移植了一些变量,并删除了不再相关的变量。例如,Panels 组件不再存在于 Bootstrap 4中,所以我们删除了相关的变量。变量文件是您可以轻松修改的起点,如果你想要详细了解,可以查看 Bootstrap 4 的 主题文档

结语

最后要说的是 Bootstrap 4 仍然是一个测试版本(我们预设使用 Bootstrap 4 Beta 2 ),几个破坏性的变更将会发布到Beta 3, 等到 Beta 3 发布之后,下一个版本将是 Bootstrap 4 的最终版本。