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 fullscreen全屏实现代码
Apr 09 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue二选一tab栏切换新做法实现
Jan 19 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
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python编写俄罗斯方块
2020/03/13 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
super关键字的用法
2012/04/10 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
Structs界面控制层技术
2013/10/11 面试题
网上商城创业计划书范文
2014/01/31 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
大学生村官演讲稿
2014/04/25 职场文书
企业趣味活动方案
2014/08/21 职场文书
班主任高考寄语
2015/02/26 职场文书
暂停营业通知
2015/04/25 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis