laravel實踐2.引入bootstrap


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') }}">

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM