将前端模板合并到 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
这条命令将创建一个新的 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');
第 3 步：安装Bootstrap
可以使用 npm 将 Bootstrap 添加到项目中。在项目目录中运行以下命令。这将把 Bootstrap 及其依赖项下载到项目中。
npm install bootstrap
第 4 步：导入Bootstrap样式和脚本
打开 resources/sass/app.scss 文件，在顶部添加以下一行以导入 Bootstrap 样式。
@import '~bootstrap/dist/css/bootstrap.css';
接下来，打开 resources/js/bootstrap.js 文件，加入 Bootstrap 的 JavaScript 组件：
require('bootstrap');
第 5 步：编译资产
现在，运行以下命令，使用 Laravel Mix 编译资产。该命令将编译 Sass 和 JavaScript 文件，并将它们复制到公共目录。
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>
这段代码利用 @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">
创建文件 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>
创建文件 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>
为页脚创建名为 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-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>
创建所有 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
步骤 3：创建路由
视图创建完成后，下一步就是创建访问视图的路由。为此，请转到 routes/web.php ，然后粘贴以下路由。
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');
第 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');
}
}
第 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>
第 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>
第 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>
第 6 步：设置主页
在这一步中，你将创建两个使用集成主题布局的新 blade 文件。您已经添加了两条路线，一条用于主页，另一条用于用户。现在，创建两个文件，看看集成主题是如何工作的。
例如，home 文件的路径是 resources/views/myHome.blade.php 。
@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>
就是这样！
通过这些步骤，你已经成功地将 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 高效地编译布局。
评论留言