• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 分享Laravel整合Bootstrap4的完整方案

分享Laravel整合Bootstrap4的完整方案

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Laravel整合Bootstrap4,完整方案等相关知识,希望对您有所帮助

如果你是想在laravel5.5上直接使用bootstrap 4,这应该是相对明智的,因为bootstrap 4最终版本已经发布了,那么这里有一个好消息,就是你不需要一步步执行下面的步骤了,你可以通过安装一个插件来快速使用上boostrap 4了,

插件链接:laravelnews/laravel-twbs4,

具体如何使用就不赘述了,按照插件文档进行就好了。 如果你是在laravel5.5之前的版本整合bootstrap 4,那么你还是需要走一遍下面的流程:

(一)安装bootstrap及相应依赖

npm install bootstrap@4.0.0-beta popper.js --save-dev

将 bootstrap-sass 从 package.json 中删除,然后再执行 npm install

(二)在你的app.scss文件中引入新的bootstrap的sass文件

//替换掉之前bootstrap-sass的引入//如果你是laravel 5.5及以后的版本,这里的node_modules换成~符号@import "node_modules/bootstrap/scss/bootstrap";

(三)编译bootstrap的js文件

在这一步可能你会想直接复制一份你的bootstrap.min.js文件到public目录,然后引用,但实际上这样是不行的,因为bootstrap 4的js组件还依赖jquery和Popper.js,默认的bootstrap.min.js文件并没有编译进去。


方法一 使用bootstrap.min.js来编译

这个时候我们需要在webpack.mix.js添加这么几行:

mix.autoload({    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],        'popper.js/dist/umd/popper.js': ['Popper']});mix.js([    'node_modules/bootstrap/dist/js/bootstrap.min.js'],'public/js/bootstrap.min.js')

可以看到,我们通过mix.autoload()方法自动加载jquery和Popper.js,这样在下面mix.js()方法编译bootstrap.min.js文件的时候就把相应的依赖编译进去了,最后我们将编译好的文件发送到了public/js/目录下,然后在需要的地方调用即可。


方法二 使用bootstrap.bundle.min.js来编译

如果你到bootstrap的node_modules/bootstrap/dist/js/目录下,会发现还有一个bootstrap.bundle.min.js文件,这个文件里其实已经预先编译了Popper.js进去,但是没有jquery,所以刚才的webpack.mix.js文件里,我们其实也可以这样来写:

mix.autoload({    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]});mix.js([    'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'],'public/js/bootstrap.min.js')

最终压缩出来的文件都是一样的,如果你是用npm run dev来编译,那么第二种方法压缩出来的文件要小一点,但如果是到了生产环境,也即npm run production,那么两者的大小都是一样的。

当然,第二种方法除了少写一行,还有一个好处,就是在最开始的时候,就不需要npm install popper.js了,无可厚非了,少下载个组件而已。

(四)加载bootstrap 4的分页视图(pagination blade)

至此,大家就可以按照bootstrap 4文档在blade视图中实际使用了,或者将已有的bootstrap 3的改成4的,因为这是bootstrap的一次相对颠覆性的升级,所以无法向下兼容,取决于你的项目大小,但一般而言将bootstrap 3的改成4是需要费一阵子功夫的。

具体的不多谈,这期间可能比较困惑的就是如何升级bootstrap 4的分页样式,方法也很多,这里提供一个最简单最快速的:

首先,找到你的resources/views/vendor/pagination目录,这是laravel默认的分页样式视图文件,如果没有执行一下php artisan vendor:publish就有了

default.blade.phpbootstrap-4.blade.php simple-default.blade.phpsimple-bootstrap-4.blade.php

可以看到laravel其实默认就已经为我们准备好了bootstrap 4的分页模板文件,这个时候最简单的就是改一下文件名字即可,之前的default.blade就是原来的bootstrap 3的,所以我们可以将其改成bootstrap-3.blade.php,然后将bootstrap-4.blade改成默认的default.blade,这样laravel加载分页的时候用的就是4的样式了。

固然,你也可以像laravel文档上说的,在每一次渲染分页的时候指定具体的分页视图文件,比如:

$paginator->links('vendor.pagination.bootstrap-4')

但这样太麻烦,知道即可。



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 分享Laravel整合Bootstrap4的完整方案

相关文章

  • 2022-04-29手把手教你使用Vue3实现图片散落效果
  • 2022-04-29Photoshop制作超酷的设计类网页横幅
  • 2022-04-29怎么通过宝塔面板实现MySQL性能简单调优
  • 2022-04-29Photoshop绘制超酷的3D门牌艺术字教程
  • 2022-04-29html中circle是什么意思
  • 2022-04-29浅谈小程序中实现图片下载功能的方法
  • 2022-04-29获得高质量流量的方法
  • 2022-04-29Photoshop制作绚丽的霓虹艺术字教程
  • 2022-04-29Photoshop制作中秋节飘带艺术字教程
  • 2022-04-29Photoshop绘制立体效果的紫色心形宝石

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • DEDECMS如何设置搜索页热门搜索词
    • 如何让Emlog支持UBB代码?
    • PHP数组去重的5种方法有哪些?
    • 手把手教你使用Vue3实现图片散落效果
    • PHP生成中间带LOGO图像的二维码
    • js实现wordpress文章复制自动加版权信息
    • Photoshop设计绚丽魔幻效果的艺术字
    • PS绘制精致陌陌图标
    • SQL语句中的with as该怎么用
    • WordPress纯代码生成文章海报图片实现分享功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有