如何在Laravel 5.4中使用bootstrap4？

Question

我在 laravel 应用程序上使用 npm 安装了 bootstrap 4。但是我觉得bootstrap3后面的工作不是bootstrap4.
使用命令：

npm 安装

npm 安装bootstrap@4.0.0-alpha.6

我有事要做吗？或者我需要手动导入 bootstrap 到 assets/sass/app.scss 文件还是其他？

Answer 1

您必须手动将 link 从 resources/assets/sass/app.scss 更改为 bootstrap。你会看到这条线

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

替换为

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

Answer 2

使用新的或空的 Laravel 项目进行流动。

从 package.json 中删除 bootstrap 条目并将其替换为 "bootstrap": "4.0.0-alpha.6".
在resources/assets/sass/app.scss，comment出variables。import。
将bootstrap的路径改为@import "node_modules/bootstrap/scss/bootstrap.scss";
在resources/assets/js/bootstrap.js中寻找require('bootsrap-sass');，改成require('bootstrap');
通过编辑 webpack.mix.js 引入 javascript。

JavaScript

mix.js([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'resources/assets/js/app.js'], 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/admin.scss', 'public/css/admin'); /* If you want to make admin css file. */

运行 $ npm install
检查 node_modules 文件夹中的 bootstrap 并且 jquery 已正确安装。如果没有安装，请手动安装。
对于bootstrap4 $ npm install bootstrap@4.0.0-alpha.6
对于jquery$ npm install jquery

如果一切顺利，你应该可以运行 npm run dev.

Note: If you need tether.js then use cdn or install manually. Because bootstrap@4 required tether.js for tooltip.

Source

Answer 3

您需要注释掉 resources/assets/sass/app.scss

中的 @import "variables"; 行

导入指令被调用了 2 次，一次在 app.scss 中，然后在安装目录中的 bootstrap.scss 文件中

Answer 4

1.npm 安装

2.npm 安装 bootstrap@4.0.0-alpha.6

3.Change "resources/assets/sass/app.scss" 中 bootstrap 的路径 @import "node_modules/bootstrap/scss/bootstrap.scss";

4.Change $font-size-base: 14px;在 variable.scss 到 $font-size-base:0.875 rem;

5.In resources/assets/js/bootstrap.js，寻找require('bootsrap-sass');并将其更改为 require('bootstrap');

运行 npm 安装 & 运行 npm dev

bootstrap 4（在 app.css 中签出）将安装到您的 laravel 5.4 或更低版本，由于 laravel 5.4 或更少使用 bootstrap 版本 3.4.1 所有默认样式将更改并且内置 laravel UI 将更改。

如何在Laravel 5.4中使用bootstrap4？

How to use bootstrap 4 in Laravel 5.4?

twitter-bootstrap

laravel

laravel-5.4