正文 

当前位置： 首页 > java > java框架

laravel项目中使用bootstrap框架

心之所依      2022-02-13     557

关键词：

Laravel 如何引入 Bootstrap

如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js（在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js）中，我们可以看到对 bootstrap js库的引入：

try {
    window.$ = window.jQuery = require(‘jquery‘);

    require(‘bootstrap‘);
} catch (e) {}

然后在 resources/js/app.js 中又引入了这个 bootstrap.js 文件：

require(‘./bootstrap‘);

这样我们在编译前端资源的时候就会将 Bootstrap 相关 js 文件加载进来。对于 Bootstrap 所需 CSS 文件，会在 resources/sass/app.scss 中引入：

@import ‘~bootstrap/scss/bootstrap‘;

从 Laravel 5.5 开始 Laravel 使用的 Bootstrap 版本就是 4.*，这个可以在项目根目录下的 package.json 中查看：

"devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "vue": "^2.5.7"
}

运行 npm install 安装 Bootstrap 库

上述 package.json 可类比为前端的 composer.json，我们通过 npm install 安装该文件中定义的依赖，就好比运行 composer install 安装 composer.json 中定义的依赖，只不过一个是安装的是 JavaScript 库，一个是安装的是 PHP 库。

如果你还没有在项目根目录下运行过 npm install 初始化项目依赖的前端资源，现在可以运行它，当然在此之前，需要在你的系统中安装最新版本的 Node.js。如果你使用的开发环境是 Homestead 的话，那么系统已经为你安装好了，去 Homestead 中执行即可；如果你使用的是 Laradock 的话，需要在 laradock/.env 中设置 WORKSPACE_INSTALL_NODE 选项为 true：

WORKSPACE_INSTALL_NODE=true

然后重新构建 workspace 容器，具体可参考Laradock文档。如果你是在 Windows 或 Mac 原生环境下使用 npm 命令，需要去官网选择对应系统的最新版本安装，安装完 Node 后，npm 也会随之安装，不必再单独安装。

运行 npm install 会在项目根目录下新增一个 node_modules 目录，并将项目依赖的所有 JavaScript 库安装到该目录下，其中就包括 bootstrap：

技术分享图片

运行 npm run dev 编译前端资源

接下来，我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了，该命令定义在 package.json 中：

技术分享图片

该命令最终运行的是 npm run development 命令，意为在开发环境对前端资源进行编译，如果需要的话你可以在这里对命令参数进行修改，如果是在生产环境，需要运行 npm run prod 命令，如果在开发环境中想要修改文件后自动编译资源可以运行 npm run watch 命令。

Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具，Webpack 是目前最新的、广泛使用的前端资源打包工具（之前还有 Grunt、Gulp 等），能够以模块方式处理所有前端资源，Laravel Mix 对其提供的功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令，大多数时候我们需要在 resources/js/app.js 和 resources/sass/app.scss 中编写代码，引入其它模块，然后运行 npm run dev 就可以了，无需任何额外配置。后面我们会专门讲一下 Laravel Mix 的各种使用，现在你只需要知道它是怎么回事就好了。

Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js：

const mix = require(‘laravel-mix‘);

mix.js(‘resources/js/app.js‘, ‘public/js‘)
   .sass(‘resources/sass/app.scss‘, ‘public/css‘);

目前，它非常之简洁，从 node_modules 中引入 laravel-mix 库，然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js，将 resources/sass/app.scss （Sass文件）编译打包后输出到 public/css/app.css：

技术分享图片

这样，我们就可以项目的前端文件下引入 /css/app.css 和 /js/app.js 使用 Bootstrap 提供的样式和 JavaScript 组件了。后面我们将在多个地方基于 Bootstrap 实现前端 CSS 视觉效果优化。

bootstrap前端框架的模板文件怎么使用？应用到web项目中？

bootstrap前端框架的模板文件怎么使用？应用到Web项目中？我下载了一个cameo的模板文件里面是一些js、css和html文件。怎么用啊求大神！参考技术A引入css和js，然后就是使用它的class名称 查看详情

在 laravel 应用程序中一起使用 tailwind css 和 bootstrap

】在laravel应用程序中一起使用tailwindcss和bootstrap【英文标题】：Usingtailwindcssandbootstraptogetherinalaravelapplication【发布时间】：2020-08-0906:37:01【问题描述】：我有一个小问题（也许很愚蠢）。我正在做我最后一年的项目，我想知道我... 查看详情

Laravel Route 使用 Javascript/Bootstrap 复选框删除

】LaravelRoute使用Javascript/Bootstrap复选框删除【英文标题】：LaravelRoutetodeletewithJavascript/BootstrapCheckbox【发布时间】：2016-05-3119:03:00【问题描述】：我在Laravel（PHP框架）中编写了一个公式，这个公式获取了一些数据并将它们与我的... 查看详情

使用单个laravel实例的多个项目(代码片段)

我是Laravel的新手。根据我对这个框架的研究，我发现它对我的项目非常有用。但是我在定制它时遇到了困难，因为Laravel框架的单个实例用于多个项目。我不想遵循Laravel中提供的多站点方法，即在项目的模型和控制器中使用目录... 查看详情

laravel项目目录结构说明

...明：|-vendor目录包含你的Composer依赖模块及laravel框架。|-bootstrap目录包含几个框架启动跟自动加载配置的文件。|-app.php|-autoload.php|-config应用程序的配置文件。|-database数据库迁移与数据填充文件。|-public项目web入口和静态资源文件(... 查看详情

未捕获的 TypeError: $(...).tooltip 不是 Laravel 应用程序中的函数（Bootstrap 4 预设）

...捕获的TypeError:$(...).tooltip不是Laravel应用程序中的函数（Bootstrap4预设）【英文标题】：UncaughtTypeError:$(...).tooltipisnotafunctioninLaravelapplication(Bootstrap4preset)【发布时间】：2018-07-0516:19:12【问题描述】：我正在使用PHP框架Laravel构建一个... 查看详情

在 Laravel JetStream 中删除 Bootstrap 并安装 TailwindCSS 的正确方法

】在LaravelJetStream中删除Bootstrap并安装TailwindCSS的正确方法【英文标题】：CorrectwaytoremoveBootstrapandinstallTailwindCSSinLaravelJetStream【发布时间】：2021-08-1322:00:27【问题描述】：我有一个默认的Laravel项目，它是带有Bootstrap和Vue.js的脚手... 查看详情

找不到或无法读取要导入的文件：在 ruby​​ on rails 项目中使用 tailwind 框架的 bootstrap-datetimepicker

...要导入的文件：在ruby​​onrails项目中使用tailwind框架的bootstrap-datetimepicker【英文标题】：Filetoimportnotfoundorunreadable:bootstrap-datetimepickerusingtailwindframeworkinrubyonrailsproject【发布时间】：2020-01-1312:47:36【问题描述】：我在我的rails项目... 查看详情

如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标

】如何通过VueJS在Laravel中使用Bootstrap4图标【英文标题】：HowtouseBootstrap4iconsinLaravelwithVueJS【发布时间】：2020-06-1822:54:47【问题描述】：我已经使用NPM将Bootstrap图标安装到Laravel/VueJS应用程序中，根据此处的说明，https://icons.getbootst... 查看详情

在laravel中使用adminlte后台模板

 AdminLTE是一个基于Bootstrap3.x的免费高级管理控制面板主题，基于Bootstrap3框架，高度可定制的，易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。composer安装AdminLTE使用AdminLTE的方式有很多，最直接的方式就是下... 查看详情

[项目推荐]corcel让你在wordpress中使用laravel

你想过可以在WordPress中使用Laravel或者任意一种PHP框架吗？ Corcel 可以帮你实现！开发网站应用就应该是快捷并有趣的。当然了，每个应用都会有它自己的需求和生命周期。WordPress是基于PHP编写的功能强大的CMS，你可以使... 查看详情

Laravel 与 Bootstrap 4 混合

】Laravel与Bootstrap4混合【英文标题】：LaravelMixwithBootstrap4【发布时间】：2021-03-1915:59:01【问题描述】：我一直在学习Laravel(8)并且喜欢使用tailwindcss。也就是说，有些事情我仍然希望使用Bootstrap。我无法找到有关如何在laravel8中使... 查看详情

如何在 Visual Studio 中更改 MVC 项目中使用的前端框架？

...tudio?【发布时间】：2017-03-0713:58:39【问题描述】：默认是Bootstrap，虽然它的方式非常好，但我更喜欢使用MDL。从每个项目中去掉Bootstrap并改为实现MDL有点痛苦。有没有一种方法可以创建默认设置MDL 查看详情

默认选中的单选输入在 Laravel 中使用 Bootstrap 语法不起作用

】默认选中的单选输入在Laravel中使用Bootstrap语法不起作用【英文标题】：DefaultcheckedradioinputnotworkinginLaravelwithBootstrapsyntax【发布时间】：2013-10-2316:50:07【问题描述】：使用Laravel4的Radio表单助手，我无法使用Bootstrap3的单选按钮语... 查看详情

laravel框架加载流程

....php此文件会加载由Composer生成的自动加载器定义并获取由bootstrap/app.php文件中所生成的Laravel应用程序实例bootstrap/app.php生成Laravel应用程序实例$app并且绑定核心AppHttpKernel::class或AppConsoleKernel::class这取决于请求类型在这里请求经过... 查看详情

Laravel 刀片中的 bootstrap 4.x 模态

】Laravel刀片中的bootstrap4.x模态【英文标题】：bootstarp4.xmodalonLaravelblade【发布时间】：2022-01-1310:18:00【问题描述】：我想在laravelBlade上使用一个引导层的模态层。我正在使用bootstrap4.0和laravel6.02但是我放的mondal没有出现，出现错... 查看详情

使用刀片将 Angular5 集成到现有的 Laravel 项目中

】使用刀片将Angular5集成到现有的Laravel项目中【英文标题】：IntegratingAngular5inanexistingLaravelprojectwithblade【发布时间】：2018-11-2705:23:33【问题描述】：我担心在我当前的项目中涉及前端框架的集成问题。我参与了一个基于Laravel的... 查看详情

在 Laravel 请求中验证 Bootstrap 日期时间选择器

】在Laravel请求中验证Bootstrap日期时间选择器【英文标题】：ValidatingBootstrapdate-timepickerinLaravelrequest【发布时间】：2018-04-3000:33:12【问题描述】：我正在使用Bootstrap日期时间选择器，我正在尝试验证控制器中的日期，但它总是给我... 查看详情