如何在laravel 8中安装 Bootstrap

55ooxyrt 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(6)|浏览(211)

我可以在网上找到的所有信息都说你应该通过运行composer require laravel/ui然后运行php artisan ui boostrap来安装 Bootstrap 。然而，在Laravel 8中，laravel/ui被弃用了。有没有新的/更好的安装 Bootstrap 的方法？

twitter-bootstrap

来源：https://stackoverflow.com/questions/68393652/how-to-install-bootstrap-in-laravel-8

6条答案

按热度按时间

ozxc1zmp1#

您可以手动安装bootstrap并编译sass。
首先，使用编译器将其添加到npm：

npm install bootstrap
npm install sass
npm install sass-loader

其次，创建（如果未创建）resources/sass/app.scss并添加以下内容：

@import '~bootstrap';

第三，在webpack.mix.js中添加编译：

mix.sass('resources/sass/app.scss', 'public/css')

然后，使用npm run dev编译它-您将看到编译后的文件public/css/app.css
现在，您可以在模板中使用它与资产：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

赞(0）回复(0）举报 2022-12-16

pvcm50d12#

我做这件事的方式和你提到的相似，即使是在Laravel 8。所以我相信你走在正确的道路上。
您可以使用此命令创建新的Laravel项目

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

之后，在laravel文件夹中运行

composer require laravel/ui

如果您只想将bootstrap添加到现有项目中，只需运行：

php artisan ui bootstrap
npm install
npm run dev

如果你需要Auth

php artisan ui bootstrap --auth

赞(0）回复(0）举报 2022-12-16

iyfjxgzm3#

**解决方案1：**手动安装 Bootstrap

1).从bootstrap网站下载bootstrap的源文件：https://getbootstrap.com/docs/5.1/getting-started/download/
请参阅此屏幕截图下载x1c 0d1x
2).重命名下载的引导文件夹并将其添加到Public文件夹

3).在文件/视图中加载 Bootstrap 文件

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="{{asset('bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
       
    <!-- Bootstrap Bundle with Popper -->
    <script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>

    <title>Hello, world!</title>
    <button class="btn btn-primary">Bootstrap btn</button>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

**解决方案2：**使用软件包管理器安装 Bootstrap
创建Laravel项目

composer create-project laravel/laravel --prefer-dist laravel-bootstrap

选择项目文件夹

cd laravel-bootstrap

**在Laravel中安装 Bootstrap **

php artisan ui bootstrap

安装 Bootstrap 包

npm -v

最后，安装 Bootstrap 包和相关的前端依赖项，如jquery

npm install

编译资产

对于SCSS：打开resources/sass文件夹中的app.scss文件，然后添加以下行

@import 'variables';
@import '~bootstrap/scss/bootstrap';

对于CSS：打开resources/css文件夹app.css文件并添加以下行

@import 'variables';
@import '~bootstrap/css/bootstrap';

运行以下命令进行资产编译

for development: npm run dev
for production: npm run production

自动执行SASS或CSS和JS更改

如果你很懒，不想在每次修改SASS/CSS和JS文件时都运行npm run dev命令，那么你应该使用下面的命令。

npm run watch

编译后，在终端中查看此状态

最后，在刀片模板中加载css和js文件

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

赞(0）回复(0）举报 2022-12-16

idfiyjo84#

一个月一个月

php artisan ui bootstrap
npm install
npm run dev
如果您没有看到Laravel Mix编译成功，请访问此Mix文档页面“https://laravel-mix.com/docs/6.0/installation“

赞(0）回复(0）举报 2022-12-16

li9yvcax5#

windows 10
Laravel版本9.17.0
PHP 8.1.6版

composer create-project laravel/laravel <project>
cd <project>
composer req laravel/ui
php artisan ui bootstrap --auth
npm install bootstrap
npm install sass
npm install sass-loader
npm install && npm run dev

赞(0）回复(0）举报 2022-12-16

dl5txlt96#

composer req laravel/ui:*将解决以下问题

Problem 1
    - Root composer.json requires laravel/ui ^4.0 -> satisfiable by laravel/ui[v4.0.0, v4.0.1, v4.0.2, 4.x-dev].
    - laravel/ui[v4.0.0, ..., 4.x-dev] require illuminate/console ^9.21 -> found illuminate/console[v9.21.0, ..., 9.x-dev] but these were not loaded, likely because it conflicts with another require.

提到的问题将发生时，你有更新的laravel和 composer 到最新版本，你是特灵安装一个以前的版本有你必须把以下命令为了获取软件包的支持版本

composer req laravel/ui:*
php artisan ui bootstrap
npm install
npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
npm run dev

赞(0）回复(0）举报 2022-12-16

我来回答

如何在laravel 8中安装 Bootstrap

6条答案

一个月一个月

相关问题

热门标签

最新问答