Laravel整合Bootstrap 4的完整方案(推荐)


Posted in Javascript onJanuary 25, 2018

如果你是想在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() 方法自动加载 jqueryPopper.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.php
bootstrap-4.blade.php
simple-default.blade.php
simple-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')

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

总结

以上所述是小编给大家介绍的Laravel整合Bootstrap 4的完整方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
layui表格数据重载
Jul 27 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue基于Teleport实现Modal组件
May 31 Vue.js
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
利用js给datalist或select动态添加option选项的方法
Jan 25 #Javascript
基于vue.js无缝滚动效果
Jan 25 #Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 #Javascript
vue通过路由实现页面刷新的方法
Jan 25 #Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
一个PHP日历程序
2006/12/06 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python打包生成so文件的实现
2020/10/30 Python
党员个人整改方案及措施
2014/10/25 职场文书
2014年生产部工作总结
2014/12/17 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
初中语文教学研修日志
2015/11/13 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python