【问题标题】：Include Bootstrap in Laravel在 Laravel 中包含引导程序
【发布时间】：2014-04-15 06:24:07
【问题描述】：

我是 Laravel 新手。我刚刚安装了一些 3rd 方包，我想将 Twitter 引导程序集成到我的脚本中。除了进入每个包并将代码添加到每个视图的刀片模板之外，有什么办法吗？

【问题讨论】：

【解决方案1】：

运行下面的命令，这将解决问题

npm i @popperjs/core

【讨论】：

你能否解释一下你的答案，为什么它应该解决这个问题？
我认为这是引导程序使用的 Tooltip & Popover Positioning Engine。
安装后确保包含和

【解决方案2】：

更新 Laravel 7.*

在终端内：

laravel new project

cd project

composer require laravel/ui

php artisan ui bootstrap

npm install && npm run dev

然后，在您正在处理的 HTML 中，同时拉入 CSS 和 JavaScript：

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="/css/app.css" rel="stylesheet">
  </head>
  <body>
    ....
    <script src="/js/app.js"></script>
  </body>
</html>

Laravel UI 的文档

@Svyat，希望这也能回答您的问题。

编码愉快:)

我意识到这已经过时了……但这是我在 Google 上获得的最高结果。希望这对将来的人有所帮助。

如果您使用的是 Laravel 6.2，

在终端内：

npm install bootstrap

在 app.scss 中：

@import "node_modules/bootstrap/scss/bootstrap";

在终端中，运行以下命令生成 /public/css/app.css 文件：

npm run dev

在welcome.blade.php 中：

<link rel="stylesheet" href="/css/app.css">

愉快的编码

【讨论】：

添加@import "node_modules/bootstrap/scss/bootstrap";后，运行npm run dev生成/public/css/app.css文件。
那么 bootstrap.js 文件呢？如果已经从 laravel 添加了“bootstrap.js”（不同），如何将其导入您的 app.js？
@Syvat，我已经更新了我的答案。让我知道这是否有帮助。
添加引导程序的更新方法对我帮助很大，因为我现在使用的是laravel 8x版本，所以下次我将使用这种方式添加最新版本的引导程序，谢谢！

【解决方案3】：

Laravel > 6.x 引入了一种处理前端脚手架的新方法，laravel/ui。

你可以简单地下载作曲家包：

composer require laravel/ui --dev

并运行工匠命令：

php artisan ui bootstrap

【讨论】：

【解决方案4】：

这是我当前运行的应用程序主布局的顶部/标题部分：

<!-- app/views/layouts/master.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.0" />
    <meta name="description" content="Simple CMS" />
    <meta name="author" content="Sheikh Heera" />
    <link rel="shortcut icon" href={{ assets("favicon.png") }} />

    <title>LaraPress</title>

    <!-- Bootstrap core CSS -->
    <link href = {{ asset("bootstrap/css/bootstrap.css") }} rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href = {{ asset("bootstrap/css/sticky-footer-navbar.css") }} rel="stylesheet" />

    <!-- Optional theme -->
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-theme.min.css') }}">
</head>

按照这种方法，让您的每个视图都像这样扩展主布局：

<!-- app/views/user/show.blade.php -->
@extends('layouts.master')

@section('content')
<div class="panel panel-default">
    <div class="panel-heading"><label>View User</label>
        <a class ='pull-right' href="{{ Request::header('referer') }}">
            <i class="glyphicon glyphicon-circle-arrow-left"></i> Go Back
        </a>
    </div>

这是我的视图的一部分（顶部），它扩展了主布局，因此它成为主布局的一部分。主布局存储在app/views/layouts/ 文件夹中，名称为master.blade.php 所以，@extends('layouts.master') 表示从layouts 文件夹扩展master.blade.php，它（名称）可以是任何东西，每个视图也必须在.php之前的文件名中包含.blade。

【讨论】：

【解决方案5】：

最好的方法是创建一个主模板并让您的每个模板扩展主模板。

然后在主模板中，任何时候您需要将 Twitter Bootstrap、jQuery 等内容添加到您的应用程序中，您只需将其添加到主模板，然后它就可以用于您拥有的每个页面。

【讨论】：

【解决方案6】：

只需创建一个模板（如果您喜欢，您可以将其称为主模板）。包括 Twitter Bootstrap。从中扩展所有其他刀片视图。

是的，就是这么简单！ =D

【讨论】：