Laravel 5 前端預設 Bootstrap 4

Seaony發表於2017-11-08
Laravel前端boot

本文翻譯整理自 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 的 主題文件。

結語

最後要說的是 Bootstrap 4 仍然是一個測試版本（我們預設使用 Bootstrap 4 Beta 2 ），幾個破壞性的變更將會發布到Beta 3， 等到 Beta 3 釋出之後，下一個版本將是 Bootstrap 4 的最終版本。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章