將前端模板合併到 Laravel 中的任務往往給開發人員帶來巨大挑戰。這是一個複雜、耗時的過程，可能會導致程式碼混亂，從而影響開發過程的效率。
廣泛使用的前端框架 Bootstrap 提供了一種解決方案。與 Laravel 整合後，它可以簡化開發流程，改善程式碼組織，並增強應用程式的視覺吸引力。
本文將逐步介紹如何將 Bootstrap 模板與 Laravel 整合。它旨在幫助你提高效率、縮短開發時間，從而構建視覺效果好、功能強的 Web 應用程式。
Laravel和Bootstrap簡介
Laravel 是一種廣泛使用的框架，用於使用 PHP 構建網路應用程式。它旨在讓開發人員更輕鬆地完成路由、快取和安全等常見任務。Laravel 為這些任務提供了隨時可用的工具，因此開發人員可以立即開始編碼。
Bootstrap 是一款免費工具，用於構建響應式、移動優先的網站。它為排版、表單和按鈕等各種元素提供了預製設計模板。使用 Bootstrap 可以讓你的 Laravel 應用程式看起來更好、更友好。
將 Laravel 強大的後端功能與 Bootstrap 的響應式前端設計相結合，可以使網站開發更快、更高效，從而開發出更好的網站應用程式。
為什麼要將Bootstrap與Laravel整合？
將 Bootstrap 與 Laravel 整合，可以讓網站開發人員受益匪淺，原因有以下幾點：
- 效率：Laravel 可以幫助完成後端任務，而 Bootstrap 可以節省前端設計的時間。將它們結合起來使用，可以更快地構建 Web 應用程式。
- 一致性：Bootstrap 可確保您的應用程式在所有裝置和平臺上看起來都很美觀。這對於需要在桌面和移動平臺上執行的應用程式來說非常有用。
- 可定製性：Bootstrap 非常靈活。您可以根據應用程式的外觀和感覺更改其設計。
- 社羣支援：Laravel 和 Bootstrap 都擁有龐大的社羣。您可以找到許多資源、教程和額外的軟體包來幫助您進行開發。
- 面向未來：Laravel 和 Bootstrap 會根據最新的網路開發實踐定期更新。使用它們可以讓您的應用程式始終保持現代化和與時俱進。
整合的系統要求
要將 Bootstrap 與 Laravel 整合，需要滿足以下系統要求：
- 作業系統：Laravel 適用於 Windows、macOS 和 Linux。
- PHP：需要 PHP 7.3 或更高版本。
- Composer：用於管理 Laravel 中的依賴關係。
- 資料庫：Laravel 支援 MySQL、PostgreSQL 和 SQL Server 等資料庫。
- 網路伺服器：Laravel 應用程式需要 Apache 或 Nginx 等網路伺服器。
- Node.js 和 NPM：用於編譯 Laravel 中的資產。
- Bootstrap：你可以從其官方網站或使用NPM獲取Bootstrap。
- 文字編輯器或整合開發環境：你需要使用 Visual Studio Code、Sublime Text 或 PHPStorm 等工具來編寫程式碼。
設定開發環境
將 Laravel 與 Bootstrap 相結合，是建立具有時尚、響應式使用者介面的網路應用程式的絕佳方法。為此，請按照以下步驟設定開發環境：
第 1 步：安裝Laravel
在整合 Bootstrap 之前，你需要安裝 Laravel。如果尚未安裝，請開啟終端，執行以下命令建立一個新的 Laravel 專案：
composer create-project --prefer-dist laravel/laravel project-name
composer create-project --prefer-dist laravel/laravel project-name
composer create-project --prefer-dist laravel/laravel project-name
這條命令將建立一個新的 Laravel 專案，目錄名為 project-name.
第 2 步: 安裝Laravel Mix
Laravel Mix是管理應用程式資產的強大工具。在你的 Laravel 專案目錄下，開啟webpack.mix.js 檔案，配置它來編譯 CSS 和 JavaScript 資產。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
第 3 步：安裝Bootstrap
可以使用 npm 將 Bootstrap 新增到專案中。在專案目錄中執行以下命令。這將把 Bootstrap 及其依賴項下載到專案中。
npm install bootstrap
npm install bootstrap
npm install bootstrap
第 4 步：匯入Bootstrap樣式和指令碼
開啟 resources/sass/app.scss 檔案，在頂部新增以下一行以匯入 Bootstrap 樣式。
@import '~bootstrap/dist/css/bootstrap.css';
@import '~bootstrap/dist/css/bootstrap.css';
@import '~bootstrap/dist/css/bootstrap.css';
接下來，開啟 resources/js/bootstrap.js 檔案，加入 Bootstrap 的 JavaScript 元件：
require('bootstrap');
require('bootstrap');
require('bootstrap');
第 5 步：編譯資產
現在，執行以下命令，使用 Laravel Mix 編譯資產。該命令將編譯 Sass 和 JavaScript 檔案，並將它們複製到公共目錄。
npm run dev
npm run dev
npm run dev
如何在Laravel上整合Bootstrap
佈局是專案的重要組成部分。Laravel 提供了一個 Blade 模板引擎，可以生成複雜的基於 HTML 的設計和模板。所有使用 Blade 構建的 Laravel 檢視都存放在 resources/views 目錄中。
預設情況下，Laravel 使用 NPM 安裝前端軟體包。雖然 Laravel 並不強制使用特定的 JavaScript 或 CSS 前處理器，但它提供了一個使用 Bootstrap、React 和/或 Vue 的基本起點，這對許多應用都很有利。
將 Bootstrap 模板與 Laravel 整合的過程非常簡單。它需要將 HTML Bootstrap 分割成更小的 Blade 模板片段。這些片段可以被利用、擴充套件和/或包含在主Blade檔案中。
Bootstrap 相簿示例將用於說明這一過程。
模板的程式碼由多個部分組成。為了有效管理這些部分，我們將建立一個佈局，將佈局的所有部分分開。
導航至 resources/view 資料夾，新建一個名為 layouts 的資料夾。該資料夾將存放主佈局和佈局中包含的其他檔案。
接下來，建立另一個資料夾並命名為 partials 。該資料夾將包含部分檔案，例如佈局檔案將使用的頁首和頁尾。
最後，進入佈局資料夾，建立一個名為 mainlayout.blade.php 的檔案。然後在該檔案中新增所需的程式碼。該檔案將作為應用程式的主要佈局。
<!DOCTYPE html>
<html lang="en">
<head>
@include('layout.partials.head')
</head>
<body>
@include('layout.partials.nav')
@include('layout.partials.header')
@yield('content')
@include('layout.partials.footer')
@include('layout.partials.footer-scripts')
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
@include('layout.partials.head')
</head>
<body>
@include('layout.partials.nav')
@include('layout.partials.header')
@yield('content')
@include('layout.partials.footer')
@include('layout.partials.footer-scripts')
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
@include('layout.partials.head')
</head>
<body>
@include('layout.partials.nav')
@include('layout.partials.header')
@yield('content')
@include('layout.partials.footer')
@include('layout.partials.footer-scripts')
</body>
</html>
這段程式碼利用 @include 指令生成一個佈局檔案，在 HTML 檔案的指定位置包含指定檔案的內容。@yield 指令用於插入擴充套件該佈局的檔案的特定內容。
步驟 1：建立部分檔案
您需要生成將整合到主佈局檔案中的部分檔案。導航至 partials 目錄，新建一個名為 head.blade.php 的檔案。該檔案將包含頁面頭部的內容。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUIyJ" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/css/album.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUIyJ" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="/css/album.css" rel="stylesheet">
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Album example for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUIyJ" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="/css/album.css" rel="stylesheet">
建立檔案 nav.blade.php 。該檔案將包含與建立 Bootstrap 頁面導航相關的程式碼。
<div class="collapse bg-inverse" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse bg-inverse" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse bg-inverse" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 py-4"> <h4 class="text-white">About</h4> <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> </div> <div class="col-sm-4 py-4"> <h4 class="text-white">Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> <li><a href="#" class="text-white">Email me</a></li> </ul> </div> </div> </div> </div> <div class="navbar navbar-inverse bg-inverse"> <div class="container d-flex justify-content-between"> <a href="#" class="navbar-brand">Album</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </div> </div>
建立檔案 header.blade.php。該檔案將包含 Bootstrap 頁面的可見頁首。
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<section class="jumbotron text-center"> <div class="container"> <h1 class="jumbotron-heading">Album example</h1> <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> <p> <a href="#" class="btn btn-primary">Main call to action</a> <a href="#" class="btn btn-secondary">Secondary action</a> </p> </div> </section>
為頁尾建立名為 footer.blade.php 的檔案。
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>
<footer class="text-muted"> <div class="container"> <p class="float-right"> <a href="#">Back to top</a> </p> <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p> </div> </footer>
建立一個名為 footer-scripts.blade.php 的檔案，其中包含應包含在頁面底部的 JS 檔案。
<!-- Bootstrap core JavaScript
================================================= -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript
================================================= -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript ================================================= --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
建立所有 views 檔案後，views 資料夾資料應該是這樣的：
僅此而已。現在，Bootstrap 模板樣本 Album Bootstrap 已成功與 Laravel 整合。
步驟 2：測試使用者介面
讓我們建立一個檢視檔案來擴充套件這個佈局檔案，看看 Bootstrap 佈局與 Laravel Blade 模板整合的實際效果。在 views 資料夾中建立檔案 demo.blade.php ，並在檔案中新增以下內容：
@extends('layout.mainlayout')
@section('content')
<div class="album text-muted">
<div class="container">
<div class="row">
<h1>This is a demo text</h1>
<p>Write any text to fill spaces</p>
</div>
</div>
</div>
@endsection
@extends('layout.mainlayout')
@section('content')
<div class="album text-muted">
<div class="container">
<div class="row">
<h1>This is a demo text</h1>
<p>Write any text to fill spaces</p>
</div>
</div>
</div>
@endsection
@extends('layout.mainlayout')
@section('content')
<div class="album text-muted">
<div class="container">
<div class="row">
<h1>This is a demo text</h1>
<p>Write any text to fill spaces</p>
</div>
</div>
</div>
@endsection
步驟 3：建立路由
檢視建立完成後，下一步就是建立訪問檢視的路由。為此，請轉到 routes/web.php ，然後貼上以下路由。
Route::get('/demo', function () {
return view('demo');
});
Route::get('/demo', function () {
return view('demo');
});
Route::get('/demo', function () {
return view('demo');
});
現在使用暫存 URL 執行應用程式。您將看到 Album Bootstrap 模板與應用程式整合。
如何在Laravel應用程式中安裝Bootstrap模板
在本節中，我將展示如何將 CoolAdmin 控制面板整合到 Laravel 應用程式中，以及如何輕鬆新增 Bootstrap 主題。我還將逐步展示如何整合管理主題，這是透過儀表板管理網站元件的關鍵功能。
安裝模板後，我將建立兩個頁面，即 my-home 和 my-users。這個過程展示了整合主題在建立功能網頁中的實際應用。
使用Laravel下載儀表盤
首先，選擇並下載一個你想在 Laravel 應用程式中使用的儀表盤。例如，CoolAdmin Dashboard 使用者介面友好，易於使用。下載完成後，提取 JS、CSS 檔案和圖示，並將它們放到你的 Laravel 應用程式中。
然後，在 Laravel 應用程式的“public”資料夾下建立一個“theme”資料夾。將提取的所有資料複製到“theme”資料夾中。
第 1 步：配置路由
首先，配置路由。為兩個頁面新增兩個路由：my-home 和 my-users。您可以在路由檔案中使用以下程式碼完成這項工作：
// routes/web.php
Route::get('my-home', 'HomeController@myHome');
Route::get('my-users', 'HomeController@myUsers');
// routes/web.php
Route::get('my-home', 'HomeController@myHome');
Route::get('my-users', 'HomeController@myUsers');
// routes/web.php
Route::get('my-home', 'HomeController@myHome');
Route::get('my-users', 'HomeController@myUsers');
第 2 步：新增控制器
接下來，您需要建立一個新的 HomeController ，併為儀表盤頁面和使用者頁面新增兩個方法。您可以在 HomeController 中使用以下程式碼。
// app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function myHome()
{
return view('myHome');
}
/**
* Show the my users page.
*
* @return \Illuminate\Http\Response
*/
public function myUsers()
{
return view('myUsers');
}
}
// app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function myHome()
{
return view('myHome');
}
/**
* Show the my users page.
*
* @return \Illuminate\Http\Response
*/
public function myUsers()
{
return view('myUsers');
}
}
// app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function myHome()
{
return view('myHome');
}
/**
* Show the my users page.
*
* @return \Illuminate\Http\Response
*/
public function myUsers()
{
return view('myUsers');
}
}
第 3 步：設定主題檔案
接下來，你將設定主題 blade 檔案。對於 CoolAdmin Dashboard 主題，您將建立三個檔案。如果你使用的是更大的主題，你可能需要建立更多的檔案來管理它。在“view”資料夾中，建立一個包含三個檔案的“theme”資料夾：
- default.blade.php
- header.blade.php
- sidebar.blade.php
然後在這三個檔案中新增程式碼。例如，預設檔案的路徑是resources/views/theme/default.blade.php 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{!! asset('theme/vendor/metisMenu/metisMenu.min.css') !!}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
@include('theme.header')
@include('theme.sidebar')
</nav>
<div id="page-wrapper">
@yield('content')
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>
<!-- Morris Charts JavaScript -->
<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>
<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>
<script src="{!! asset('theme/data/morris-data.js') !!}"></script>
<!-- Custom Theme JavaScript -->
<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{!! asset('theme/vendor/metisMenu/metisMenu.min.css') !!}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
@include('theme.header')
@include('theme.sidebar')
</nav>
<div id="page-wrapper">
@yield('content')
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>
<!-- Morris Charts JavaScript -->
<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>
<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>
<script src="{!! asset('theme/data/morris-data.js') !!}"></script>
<!-- Custom Theme JavaScript -->
<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{!! asset('theme/vendor/metisMenu/metisMenu.min.css') !!}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
@include('theme.header')
@include('theme.sidebar')
</nav>
<div id="page-wrapper">
@yield('content')
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>
<!-- Morris Charts JavaScript -->
<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>
<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>
<script src="{!! asset('theme/data/morris-data.js') !!}"></script>
<!-- Custom Theme JavaScript -->
<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>
</body>
</html>
第 4 步：設定頁首
在 resources/views/theme/header.blade.php 目錄檔案中插入以下程式碼。
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<span class="bmd-form-group">
<div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div>
</span>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top "> <div class="container-fluid"> <div class="navbar-wrapper"> <a class="navbar-brand" href="#pablo">Dashboard</a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle navigation</span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span> </button> <div class="collapse navbar-collapse justify-content-end"> <form class="navbar-form"> <span class="bmd-form-group"> <div class="input-group no-border"> <input type="text" value="" class="form-control" placeholder="Search..."> <button type="submit" class="btn btn-white btn-round btn-just-icon"> <i class="material-icons">search</i> <div class="ripple-container"></div> </button> </div> </span> </form> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#pablo"> <i class="material-icons">dashboard</i> <p class="d-lg-none d-md-block"> Stats </p> </a> </li> <li class="nav-item dropdown"> <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="material-icons">notifications</i> <span class="notification">5</span> <p class="d-lg-none d-md-block"> Some Actions </p> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Mike John responded to your email</a> <a class="dropdown-item" href="#">You have 5 new tasks</a> <a class="dropdown-item" href="#">You're now friend with Andrew</a> <a class="dropdown-item" href="#">Another Notification</a> <a class="dropdown-item" href="#">Another One</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="material-icons">person</i> <p class="d-lg-none d-md-block"> Account </p> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile"> <a class="dropdown-item" href="#">Profile</a> <a class="dropdown-item" href="#">Settings</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Log out</a> </div> </li> </ul> </div> </div> </nav>
第 5 步：設定側邊欄
成功設定頁首後，就該設定側邊欄了。插入以下程式碼。
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper ps-container ps-theme-default" data-ps-id="d8631889-919e-0705-2d4b-159fdbdfe8cd">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<!-- More list items... -->
</ul>
</div>
<div class="sidebar-background" style="background-image: url(../assets/img/sidebar-1.jpg) "></div>
</div>
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper ps-container ps-theme-default" data-ps-id="d8631889-919e-0705-2d4b-159fdbdfe8cd">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<!-- More list items... -->
</ul>
</div>
<div class="sidebar-background" style="background-image: url(../assets/img/sidebar-1.jpg) "></div>
</div>
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg"> <div class="logo"> <a href="http://www.creative-tim.com" class="simple-text logo-normal"> Creative Tim </a> </div> <div class="sidebar-wrapper ps-container ps-theme-default" data-ps-id="d8631889-919e-0705-2d4b-159fdbdfe8cd"> <ul class="nav"> <li class="nav-item active "> <a class="nav-link" href="./dashboard.html"> <i class="material-icons">dashboard</i> <p>Dashboard</p> </a> </li> <!-- More list items... --> </ul> </div> <div class="sidebar-background" style="background-image: url(../assets/img/sidebar-1.jpg) "></div> </div>
第 6 步：設定主頁
在這一步中，你將建立兩個使用整合主題佈局的新 blade 檔案。您已經新增了兩條路線，一條用於主頁，另一條用於使用者。現在，建立兩個檔案，看看整合主題是如何工作的。
例如，home 檔案的路徑是 resources/views/myHome.blade.php 。
@extends('theme.default')
@section('content')
@endsection
@extends('theme.default')
@section('content')
@endsection
@extends('theme.default')
@section('content')
@endsection
第 7 步：僱員表
該表是 myUsers blade 檔案的一部分，將顯示每位員工的關鍵資訊，如 ID、姓名、工資和國家。在 myUsers.blade.php 檔案中插入以下程式碼。
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Employees Stats</h4>
<p class="card-category">New employees on 15th September, 2016</p>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Employees Stats</h4>
<p class="card-category">New employees on 15th September, 2016</p>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12"> <div class="card"> <div class="card-header card-header-warning"> <h4 class="card-title">Employees Stats</h4> <p class="card-category">New employees on 15th September, 2016</p> </div> <div class="card-body table-responsive"> <table class="table table-hover"> <thead class="text-warning"> <tr> <th>ID</th> <th>Name</th> <th>Salary</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Dakota Rice</td> <td>$36,738</td> <td>Niger</td> </tr> <tr> <td>2</td> <td>Minerva Hooper</td> <td>$23,789</td> <td>Curaçao</td> </tr> <tr> <td>3</td> <td>Sage Rodriguez</td> <td>$56,142</td> <td>Netherlands</td> </tr> <tr> <td>4</td> <td>Philip Chaney</td> <td>$38,735</td> <td>Korea, South</td> </tr> </tbody> </table> </div> </div> </div>
就是這樣！
透過這些步驟，你已經成功地將 CoolAdmin 控制面板整合到了你的 Laravel 應用程式中，並建立了一個帶有“主頁”和“使用者”頁面的使用者友好介面。
適用於Laravel的最佳Bootstrap模板
1. Vuexy – Laravel管理控制面板模板
Vuexy 的設計目的是簡化複雜的響應式網路應用程式的構建過程，它提供了大量預置元件、部件和佈局選項，使其成為建立現代化專業管理面板的首選。
Vuexy 具有模組化和高度可定製的架構。它提供了一個簡潔直觀的使用者介面，可增強整體使用者體驗，讓開發人員可以毫不費力地根據具體專案要求調整模板。
2. Argon Dashboard 2 Pro Laravel
Argon Dashboard 2 Pro Laravel 是一款採用Laravel開發的全棧應用程式，它能幫助你更快地構建美觀實用的Web專案。它將數百個 Bootstrap 5 UI 元件與 Laravel 後端結合在一起，擁有管理面板所需的所有功能。
你可以從 54 個示例頁面和 16 個自定義外掛中進行選擇，建立自己的網路應用程式。Argon Dashboard 2 Pro Laravel易於使用，文件齊全。它還支援 SaaS 應用程式，可以透過訂閱計劃向使用者收費。
3. Connect Plus Vue
Connect Plus Vue 是一款設計獨特精美的管理儀表盤模板，集強大功能和簡潔性於一身。它擁有許多使用者介面元素和功能，是適用於任何專案的多功能工具。它因其可用性、排版和設計而脫穎而出。
該模板由一個專門的支援團隊提供支援，確保順利無憂地使用。無論您是經驗豐富的開發人員還是初學者，Connect Plus Vue 都是您建立高效且具有視覺吸引力的管理儀表盤的可靠選擇。
小結
本教程簡化了將 Bootstrap 與 Laravel 整合的過程，使複雜的任務變得易於管理。它提高了您的效率和應用程式的美感，帶來了更順暢的開發體驗。快樂整合！
當你想託管一個 Laravel 專案時，將 Bootstrap 模板與 Laravel 整合不僅可行，而且非常有益。它可以讓開發人員利用 Laravel 強大的後端功能與 Bootstrap 前端元件的響應性和美觀性，建立一個無縫且具有視覺吸引力的 Web 應用程式。
常見問題
Q. 如何在 Laravel 中整合模板？
A. 在 Laravel 中整合模板, 把模板檔案放到 resources/views 目錄, 用 Blade templating 建立一個主佈局, 用 @yield 和 @section 指令包含版塊。將 CSS 和 JS 檔案連結到 public/ 或使用 Laravel Mix 進行資產管理。
Q. 如何在 Laravel 專案中新增主題？
A. 將主題的資產（CSS、JS、圖片）複製到 public/ 資料夾，並將 HTML 模板放入 resources/views 資料夾。將靜態內容轉換為 Blade 模板，用 @yield 和 @include 指令替換硬編碼部分，以提高重用性。
Q. 如何在 Laravel 8 中整合管理模板？
A. 要整合管理模板，請將 CSS 和 JS 資產放在 public/ 目錄中，在 resources/views/layouts/ 中建立主佈局，並構建 Blade 元件以擴充套件布局。使用 Laravel Mix 編譯資產，並使用 Blade 語法包含動態資料。
Q. 如何在 Laravel 11 中使用 Bootstrap 5？
A. 使用 npminstall bootstrap安裝 Bootstrap 5，在 app.scss 或 app.js 檔案中匯入它，然後使用 Laravel Mix 編譯資產。或者，在 Blade 模板中使用 Bootstrap 5 CDN 進行快速整合。
Q. Laravel 使用 Tailwind 還是 Bootstrap？
A. Laravel 在新版本的前端腳手架中預設使用 Tailwind CSS。不過，Bootstrap 也可以作為替代方案輕鬆整合。
Q. 什麼是 Laravel 中的引導?
A. Laravel 中的引導是指初始化過程，框架在處理請求之前會載入配置檔案，註冊服務提供商，並設定環境。
Q. 在 Laravel 中使用 Bootstrap 有何好處？
A. Bootstrap 提供即用型響應式元件，確保跨裝置的相容性。它簡化了使用者介面設計，與 Laravel 的 Blade 模板無縫整合，加快了開發速度。
Q. 將 Bootstrap 與 Laravel 整合的最佳實踐是什麼？
A. 使用主 Blade 模板實現可重用性，在 public/ 中組織樣式表和指令碼，透過 npm 安裝 Bootstrap 以方便更新，使用 Laravel Mix 高效地編譯佈局。
評論留言