如何在 Laravel 8 中安装 Bootstrap
MrS*_*lly 18 css twitter-bootstrap laravel laravel-8
我可以在网上找到的所有信息都表明您应该通过运行composer require laravel/ui然后安装 bootstrap php artisan ui boostrap。然而，在 Laravel 8 中，laravel/ui已被弃用。有没有新的/更好的安装引导程序的方法？
小智 42
您可以手动安装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">
小智 15
我的做法与你提到的类似，即使在 Laravel 8 中也是如此。所以我相信你走在正确的道路上。
您可以使用此命令创建一个新的 Laravel 项目
composer create-project laravel/laravel --prefer-dist laravel-bootstrap
之后，在 laravel 文件夹中运行
composer require laravel/ui
如果您只想将引导程序添加到现有项目中，只需运行：
php artisan ui bootstrap
npm install
npm run dev
如果您需要身份验证
php artisan ui bootstrap --auth
- @KennedyOwusu 首次运行作曲家需要 laravel/ui (2认同)
解决方案1：手动安装bootstrap
\n\n
1）。从 bootstrap 网站下载 bootstrap 的源文件：https://getbootstrap.com/docs/5.1/getting-started/download/
\n请参阅此屏幕截图进行下载\n
2）。重命名下载的引导文件夹并将其添加到公用文件夹\n
3）。在文件/视图中加载 Bootstrap 文件
\n
<!doctype html>\n<html lang="en">\n <head>\n <!-- Required meta tags -->\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n\n <!-- Bootstrap CSS -->\n <link href="{{asset(\'bootstrap/css/bootstrap.min.css\')}}" rel="stylesheet">\n \n <!-- Bootstrap Bundle with Popper -->\n <script src="{{asset(\'bootstrap/js/bootstrap.bundle.min.js\')}}"></script>\n\n <title>Hello, world!</title>\n <button class="btn btn-primary">Bootstrap btn</button>\n </head>\n <body>\n <h1>Hello, world!</h1>\n </body>\n</html>\n\n
解决方案 2：使用包管理器安装 bootstrap
\n\n
创建 Laravel 项目
\ncomposer create-project laravel/laravel --prefer-dist laravel-bootstrap\n选择项目文件夹
\ncd laravel-bootstrap\n在 Laravel 中安装 Bootstrap
\nphp artisan ui bootstrap\n安装引导程序包
\nnpm -v\n最后，安装bootstrap包以及jquery等相关前端依赖
\nnpm install\n编译资产
\n对于 SCSS：打开 resources/sass 文件夹中的 app.scss 文件并添加以下行
\n@import \'variables\';\n@import \'~bootstrap/scss/bootstrap\';\n对于 CSS：打开 resources/css 文件夹中的 app.css 文件并添加以下行
\n@import \'variables\';\n@import \'~bootstrap/css/bootstrap\';\n运行以下命令进行资产编译
\nfor development: npm run dev\nfor production: npm run production\n自动执行 SASS 或 CSS 和 JS 更改
\n如果你很懒并且不想每次更改 SASS/CSS 和 JS 文件时都运行 npm run dev 命令，那么你应该使用以下命令。
\nnpm run watch\n编译后在终端中看到这个状态
\n
最后，在刀片模板中加载 css 和 js 文件
\n <!doctype html>\n<html>\n<head>\n <meta charset="utf-8">\n <title>{{ config(\'app.name\', \'Laravel\') }}</title>\n <!-- Scripts -->\n <script src="{{ asset(\'js/app.js\') }}" defer></script>\n <!-- Styles -->\n <link href="{{ asset(\'css/app.css\') }}" rel="stylesheet">\n</head>\n<body>\n <h1>Tutorial made by Positronx.io</h1>\n</body>\n</html>\n| 归档时间： |
|
| 查看次数： |
60121 次 |
| 最近记录： |