1.安裝bootstrap
composer require laravel/ui --dev
2.引入bootstrap
php artisan ui bootstrap
3.Bootstrap 是以 NPM 擴展包的形式集成到 Laravel 項目中的. 在package.json中可發現:
- bootstrap —— Bootstrap NPM 擴展包;
- jquery —— jQuery NPM 擴展包;
- laravel-mix —— 由 Laravel 官方提供的靜態資源管理工具。
這些擴展包,為 Laravel 提供了一套完整的前端工作流。
4.可以使用 NPM 對這些擴展包進行安裝。
先使用國內鏡像加速:
$ npm config set registry=https://registry.npm.taobao.org $ yarn config set registry 'https://registry.npm.taobao.org'
5.使用 Yarn 對擴展包進行安裝,請在項目根目錄下運行以下命令進行安裝:
$ yarn install --no-bin-links $ yarn add cross-env
6.編輯resources/sass/app.scss
@import '~bootstrap/scss/bootstrap';
7.將 Bootstrap 導入成功之后,需要使用以下命令來將 .scss 文件編譯為 .css 才能正常使用
npm run dev
或使用以下命令實時監測.scss變化並及時編譯為.css
npm run watch-poll
(在進行項目開發時 npm run watch-poll 必須一直運行着,避免出現前端文件更改后沒有應用到頁面上)。
所有編譯后的資源文件都被存放在 public 文件夾中,在 public/css 文件夾中看到剛剛編譯成功之后的文件。
8.在所需視圖頁面的<head>中引入:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
