php 在 Laravel 中包含 Bootstrap

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22329145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-25 04:50:36  来源:igfitidea点击:

Include Bootstrap in Laravel

phplaravellaravel-4

提问by user1801060

I'm a Laravel newbie. I have just installed some 3rd party packages and I would like to integrate Twitter bootstrap into my script. Is there any way to do it, short of going into each package and adding the code to the blade templates of each view?

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

回答by AlmostPitt

Update for Laravel 7.*

Laravel 7.* 的更新

Within terminal:

航站楼内:

laravel new project

cd project

composer require laravel/ui

php artisan ui bootstrap

npm install && npm run dev


Then, in the HTML that you are working on, pull in both the CSS and JavaScript:

然后,在您正在处理的 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>

@Svyat, hopefully, this answers your question as well.

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

Happy coding :)

快乐编码:)



I realize that this is old... but it was the top result that come up for me on Google. Hopefully this will help someone in the future.

我意识到这是旧的......但它是我在谷歌上出现的最佳结果。希望这会在将来对某人有所帮助。

If you are using Laravel 6.2,

如果您使用的是Laravel 6.2

Within terminal:

航站楼内:

npm install bootstrap

Within app.scss:

在 app.scss 中:

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

In Terminal, run the following to generate /public/css/app.css file:

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

npm run dev 

Within welcome.blade.php:

在welcome.blade.php 中:

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

Happy coding

快乐编码

回答by The Alpha

This is the top/header part of my currently running application's master layout:

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

<!-- 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>

Follow this approach and make your each view to extend the master layout like this:

按照这种方法,让你的每个视图像这样扩展主布局:

<!-- 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>

This is a partial of my view (top part) which extends the master layout so it become a part of the master layout. Master layout is stored in app/views/layouts/folder and name is master.blade.phpso, @extends('layouts.master') means to extend master.blade.phpfrom layoutsfolder and it (name) could be anything, each view also must contains .bladein the file name before the .php.

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

回答by user1669496

The best way would be to create a master template and have each of your templates extend the master template.

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

Then in the master template, any time you need to add something like Twitter Bootstrap, jQuery, etc... to your app, you just add to the the master template and then it would be available to each page you have.

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

回答by Dennis Braga

Just create a template (you can call it main, if it pleases you). Include the Twitter Bootstrap on it. Extend all of your other blades views from it.

只需创建一个模板(如果您喜欢,您可以将其称为 main)。在其上包含 Twitter Bootstrap。从中扩展所有其他刀片视图。

YES, it's that simple!=D

是的,就是这么简单!=D

回答by dwenzel

Laravel > 6.x introduced a new approach to deal with frontend scaffolding, laravel/ui.

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

You can simply download the composer package:

您可以简单地下载 composer 包:

composer require laravel/ui --dev

And run a artisan command:

并运行工匠命令:

php artisan ui bootstrap