Laravel에 Bootstrap 4를 통합하는 방법은 무엇입니까?

이 글은 주로 Bootstrap 4를 통합한 Laravel의 완전한 솔루션을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요하신 분들은 참고하시면 됩니다

[관련 영상 추천: Bootstrap 튜토리얼]

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

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

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

Put bootstrap-sass from package.json 삭제 그런 다음 npm install

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

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

(3) 부트스트랩 js 파일을 컴파일하세요

이 단계에서는 부트스트랩을 직접 복사할 수도 있습니다. min.js 파일을 공용 디렉토리에 복사한 다음 이를 참조하지만 실제로는 bootstrap 4의 js 구성 요소도 jquery와 Popper.js , 기본값인 bootstrap.min .js 에 의존하기 때문에 불가능합니다. 파일이 컴파일되지 않았습니다.

방법 1은 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/ 디렉터리를 선택한 다음 필요한 곳에서 호출하세요.

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

컴파일합니다. bootstrap의 node_modules/bootstrap/dist/js/ 디렉토리에 가면 또 다른 bootstrap.bundle.min이 있다는 것을 알 수 있습니다. 실제로 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 필요가 없다는 점입니다. 다운로드.

(4) 부트스트랩 4의 페이지네이션 블레이드를 로드합니다

이때 실제로 부트스트랩 4 문서에 따라 블레이드 뷰에서 사용하거나 기존 부트스트랩 3을 4로 변경할 수 있습니다. 파괴적인 업그레이드이므로 이전 버전과 호환되지 않습니다. 프로젝트 규모에 따라 다르지만 일반적으로 부트스트랩 3을 4로 변경하는 데 시간이 걸립니다.

이 기간 동안 혼란스러울 수 있는 것은 부트스트랩 4의 페이징 스타일을 업그레이드하는 방법입니다. 가장 간단하고 빠른 방법은 다음과 같습니다.

우선 다음을 찾으세요. your 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')

하지만 이것은 너무 번거롭습니다. 알아두세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

반응 서버 렌더링 구현 문제에 대해 자세히 설명

jquery를 사용하여 PC 측 캐러셀을 작성하는 방법(자세한 튜토리얼)

Vue에서 헤더 구성 요소를 통해 개발하는 방법( 자세한 튜토리얼)

위 내용은 Laravel에 Bootstrap 4를 통합하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!