Laravel을 Bootstrap 4와 통합하기 위한 완전한 솔루션을 공유하세요

Laravel Tutorial 칼럼에서는 Laravel을 Bootstrap 4와 통합하는 완벽한 솔루션을 소개합니다. 필요한 친구들에게 도움이 되길 바랍니다!

2018년 1월 23일 업데이트: laravel5.5에서 직접 부트스트랩 4를 사용하고 싶다면 이는 상대적으로 현명해야 합니다. 부트스트랩 4의 최종 버전이 출시되었기 때문에 여기에 좋은 소식이 있습니다. 아래 단계를 단계별로 수행할 필요가 없습니다. 플러그인을 설치하면 Boostrap 4를 빠르게 사용할 수 있습니다. 플러그인 링크: laravelnews/laravel-twbs4 사용 방법에 대해서는 자세히 설명하지 않겠습니다. 플러그인 설명서를 따르십시오. laravel 5.5 이전 버전에서 부트스트랩 4를 통합하는 경우에도 다음 프로세스를 거쳐야 합니다:

(1) 부트스트랩 및 해당 종속성을 설치합니다.

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

에서 bootstrap-sass를 교체합니다. package.json에서 삭제한 다음 npm installbootstrap-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.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

을 실행하세요. (2) app.scss 파일 sass 파일에 새 부트스트랩을 추가하세요

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

(3) 부트스트랩 js 파일 컴파일

이 단계에서는 bootstrap.min.js 파일을 공용 디렉터리에 직접 복사한 후 참조하고 싶을 수도 있지만 실제로는 이렇습니다. bootstrap 4의 js 구성 요소도 jquery 및 Popper.js에 의존하고 기본 bootstrap.min.js 파일은 그렇지 않기 때문에 불가능합니다. 컴파일되지 않았습니다. 🎜

방법 1은 bootstrap.min.js를 사용하여 컴파일

🎜이때 이것을 webpack.mix.js에 추가해야 합니다. code> 몇 줄: 🎜rrreee🎜<code>mix.autoload() 메서드를 통해 jquery 및 Popper.js를 자동으로 로드하는 것을 볼 수 있습니다. mix.js() 메소드가 bootstrap.min.js 파일을 컴파일할 때 해당 종속성이 컴파일됩니다. 마지막으로 컴파일된 파일을 다음으로 보냅니다. public/js/ 디렉토리를 찾은 다음 필요한 곳에서 호출하세요. 🎜

방법 2는 bootstrap.bundle.min.js를 사용하여 컴파일

🎜부트스트랩의 node_modules/bootstrap/dist/js/ 디렉터리에는 또 다른 <code>bootstrap.bundle.min.js 파일이 있습니다. 실제로 이 파일에는 Popper.js가 미리 컴파일되어 있습니다. code>jquery가 없으므로 지금 webpack.mix.js 파일에서 실제로 다음과 같이 작성할 수 있습니다. 🎜rrreee🎜최종 압축 파일은 npm run dev를 사용하여 컴파일하면 두 번째 방법으로 압축한 파일은 작아지지만, 프로덕션 환경, 즉 npm run Production에 있는 경우에는 , 그러면 둘 다 크기가 모두 동일합니다. 🎜🎜물론, 두 번째 방법에는 한 줄을 적게 쓰는 것 외에도 또 다른 장점이 있습니다. 즉, 처음에는 npm install popper.js가 필요하지 않다는 것입니다. 다운로드하려면 구성 요소가 하나만 필요합니다. 🎜🎜 (4) 부트스트랩 4의 페이지 매김 블레이드를 로드합니다🎜🎜 이때 실제로 부트스트랩 4 문서에 따라 블레이드 뷰에서 사용하거나 기존 부트스트랩 3을 4로 변경할 수 있습니다. 파괴적인 업그레이드이므로 이전 버전과 호환되지 않습니다. 프로젝트 규모에 따라 다르지만 일반적으로 부트스트랩 3을 4로 변경하는 데 시간이 걸립니다. 🎜🎜이 기간 동안 혼란스러울 수 있는 것은 부트스트랩 4의 페이징 스타일을 업그레이드하는 방법입니다. 가장 간단하고 빠른 방법은 다음과 같습니다. 🎜🎜먼저 resources/views/vendor/pagination 디렉토리는 laravel의 기본 페이징 스타일 보기 파일입니다. php artisan Vendor:publish를 실행하지 않으면 거기에 있습니다🎜rrreee🎜 laravel이 실제로 기본값으로 설정된 것을 볼 수 있습니다. 부트스트랩 4에 대한 페이징 템플릿 파일을 준비했습니다. 이때 가장 간단한 것은 파일 이름을 변경하는 것입니다. 이전 default.blade는 원래 부트스트랩 3입니다. , bootstrap-3.blade.php로 변경한 다음 bootstrap-4.blade를 기본 default.blade로 변경할 수 있습니다. , laravel이 페이징을 로드할 때 사용되는 스타일은 4입니다. 🎜🎜물론, laravel 문서에 나와 있듯이 페이징을 렌더링할 때마다 다음과 같이 특정 페이징 보기 파일을 지정할 수 있습니다. 🎜rrreee🎜하지만 이것은 너무 번거롭습니다. 알아두세요. 🎜

위 내용은 Laravel을 Bootstrap 4와 통합하기 위한 완전한 솔루션을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!