使用 Laravel 5.7 安装 Bootstrap 4

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/53752401/
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-09-08 17:55:20  来源:igfitidea点击:

Bootstrap 4 Installation With Laravel 5.7

laravellaravel-5npmbootstrap-4laravel-5.7

提问by Pablo Curumaco

I am trying to compile my app.scss file that comes with my new project from Laravel, but I want to install Bootstrap 4. At the time of doing my npm run devdoes not install Bootstrap 4, but it still has the Bootstrap that Laravel brings by default.

我正在尝试从 Laravel 编译我的新项目附带的 app.scss 文件,但我想安装 Bootstrap 4。在这样做时,我npm run dev没有安装 Bootstrap 4,但它仍然具有 Laravel 默认带来的 Bootstrap .

Any recommendations or documentation for this?

对此有任何建议或文档吗?

enter image description here

在此处输入图片说明

回答by Marcin Nabia?ek

In fact Laravel comes with Bootstrap 4 by default. If you take a look at https://github.com/laravel/laravel/blob/master/package.jsonfile (you should have package.json in your project too) you will see line:

事实上,Laravel 默认自带 Bootstrap 4。如果您查看 https://github.com/laravel/laravel/blob/master/package.json文件(您的项目中也应该有 package.json),您将看到以下行:

"bootstrap": "^4.0.0"

what means Bootstrap 4 will be installed.

这意味着将安装 Bootstrap 4。

You should run

你应该跑

npm install

to install all packages and by default it will install Bootstrap 4.

安装所有软件包,默认情况下它将安装 Bootstrap 4。

This ~sign mean here node_modulesdirectory so in fact line

这个~标志意味着这里的node_modules目录所以实际上是行

@import "~bootstrap/scss/bootstrap"

means

方法

@import "node_modules/bootstrap/scss/bootstrap"

回答by J. Robinson

If you look in the Laravel welcome.blade.php file, you can see some CSS and a link tag that imports a Google Font. This is not to be confused with actually importing Bootstrap 4.

如果您查看 Laravel 的welcome.blade.php 文件,您可以看到一些CSS 和一个导入Google 字体的链接标签。不要将这与实际导入 Bootstrap 4 混淆。

Heres the steps to take to implement Bootstrap 4, and all the other cool things that come with Laravel by default. It already seems as though you've run npm run watchso I'm going to assume you've run that command.

下面是实现 Bootstrap 4 的步骤,以及 Laravel 默认附带的所有其他很酷的东西。看起来你已经运行了,npm run watch所以我假设你已经运行了那个命令。

Simple Steps

简单的步骤

Add a link tag to your head element:

将链接标签添加到您的 head 元素:

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

Add the following at the bottom of your body element:

在 body 元素的底部添加以下内容:

<script src="js/app.js" charset="utf-8"></script>

That should do it for you. But please make sure you've compiled the SCSS files and Javascript files using the npm run watchcommand or else it won't work!

那应该为你做。但是请确保您已经使用该npm run watch命令编译了 SCSS 文件和 Javascript 文件,否则将无法运行!

Cheers!

干杯!