Laravel 5 前端预设 Bootstrap 4
18

本文翻译整理自 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 的最终版本。

本帖由 Summer 于 1年前 加精
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 2
沙渺

breaking changes 是“破坏性变更”啊!翻译成“突破性的改变”意思全反了

1年前

@沙渺 抱歉,已修正! :smile:

1年前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!