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 节点模块，并添加 bootstrap 和 popper.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 的主题文档。