PHPLaravel

在 Laravel 5.5 中使用 Bootstrap 4 的实践

Laravel 5.5 发布时及之前默认使用 Bootstrap 3，提供了很方便的脚手架，可以轻松创建基于 Bootstrap 的自定义主题。而 Laravel 5.5 发布后，Paul Redmond 为我们带来了一个新的前端预处理 Package： laravel-bootstrap4，尽管 Bootstrap 目前（该文发布时）仍然是 Beta 2，但在 Beta 3 之后的下一个版本将是 Bootstrap 4 的最终版。如果想用新的 Bootstrap 改造你的网站，现在就可以动手了。

安装

参考译文 https://laravel-china.org/articles/6666/laravel-5-front-end-preset-bootstrap-4 (原文 https://laravel-news.com/bootstrap-4-laravel-preset)

1
$ composer require laravelnews/laravel-twbs4

执行 Package 注册的预设命令

1
$ php artisan preset bootstrap4-auth

或如果不需要使用默认的 auth 视图，则可以执行另外一条预设命令：

1
$ php artisan preset bootstrap4

关于 auth 视图，跟 php artisan make:auth 命令创建的视图对比，使用了基于 Bootstrap 4 定义的样式表及组件。

按提示，安装依赖并编译（如果是产品环境请用 npm run prod）

1
$ npm install && npm run dev

根据 Bootstrap 文档 使用 jQuery slim 编译，参照 resources/assets/js/bootstrap.js 中 window.$ = window.jQuery = require('jquery/dist/jquery.slim')。相对完整版，slim 少了 ajax, animation effect 等相关内容。

定制主题

Laravel 提供了新的 _variables.scss 作为使用 Bootstrap 4 的起点，具体内容参考如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Body
$body-bg: #fff;

// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border-color: $laravel-border-color;

$card-border-color: $laravel-border-color;

// Brands
$primary: #3097D1;
$info: #8eb4cb;
$success: #2ab27b;
$warning: #cbb956;
$danger: #bf5329;

// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: .875rem; // 14px
$line-height-base: 1.6;
$text-color: #636b6f;

// Inputs
$input-border-color: lighten($text-color, 40%);
$input-placeholder-color: lighten($text-color, 30%);

关于定制主题的更多内容可以参考 Bootstrap Theming 文档