Magento 2 테마에 Bootstrap 4를 추가하는 방법?

12

내 사용자 지정 테마에 Bootstrap 4 를 추가했습니다 .

참조를 사용하여 Bootstrap 3을 추가합니다.

사용자 정의 테마에서 부트 스트랩을 사용하는 방법

그러나 부트 스트랩 4가 작동하지 않습니다.

— 마법사 코드
소스

"작동하지 않는다"는 무슨 의미입니까?

— Black

23

사용자 정의 테마에서 Bootstrap 4를 Magento 2.2.3 (테스트) 이상에 추가하려면 다음 단계를 수행하십시오.

1) 웹 폴더 내의 부트 스트랩 CSS 파일

참고 : THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

default_head_blocks에서 부트 스트랩 CSS 파일 호출

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

CSS 추가

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!--Bootstrap css-->
        <css src="css/bootstrap.css" />
    </head>
</page>

2) 개인이 작동하지 않기 때문에 개별적이 아닌 번들 형태로 Js 파일 추가

bootstrap.bundle.js 파일 은 여기 에서 다운로드 할 수 있습니다

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js

requirejs-config.js로 부트 스트랩 Js 호출

THEME_LOCATION\Magento_Theme\requirejs-config.js

의 코드

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

이미 존재하는 스크립트 태그 뒤에 header.phtml에 아래 코드를 추가하십시오.

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

암호:

<script type="text/javascript">require(['bootstrap']);</script>

아래 명령을 실행하십시오.

php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

참고 : Magento 2.2.3 및 최신 버전 2.2.6에서 테스트되었습니다. 2.3.3에서 테스트

업데이트 : 여기 에서 컴파일 된 부트 스트랩을 다운로드 하고 번들 js를 사용 하십시오.

— 마노이 데스 왈
소스

알았어 고마워. 이 솔루션을 시도해 보겠습니다. BTW bootstrap.bundle.js와 bootstrap.js의 차이점은 무엇입니까?

— Magecode

Popper.js는 번들 JS에 포함 ..... 및 JQuery와는 포퍼 혼자 작동하지 않습니다 .... 이미 내부 젠토이지만 번들로 사용하여 작동합니다

— 마노 Deswal

@Magecode는 Magento 2.2.4에서 작동합니까?

— Manoj Deswal

1

나는 마침내 그것을 알아 냈습니다 ... 나는 MY_THEME / Magento_Theme / web / js 대신 MY_THEME / web / js에 js를 배치했습니다. 죄송합니다

— Black

1

이것은 2.2.3 이전의 표준 작업 방식이지만 2.2.3에서는 작동하지 않았으며 위의 방법을 발견했습니다. 그러나 그것은

— 여전히

11

이 방법으로 부트 스트랩을 추가 할 수 있습니다. 아래 단계를 따르십시오. 참고 : 이 솔루션은 Magento 2.2.3 이상에서는 작동하지 않습니다

1) JS와 CSS를 아래 위치에 배치하십시오.

/ app / design / frontend / vendor-name / theme-name / web / css

/ app / design / frontend / vendor-name / theme-name / web / js

2) default_head_blocks.xml의 파일 호출

app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml

이 코드 줄을 추가하십시오

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

3) 아래 명령을 실행

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

— Mayur Rathod
소스

그리고 Magento 2.2.3 이상에서 어떻게 작동합니까?

— Black

6

bower package manager를 사용하여 테마 웹 폴더에 부트 스트랩 4를 추가해야합니다.

왜? 지속적인 업데이트가 있고 관리하기 쉽기 때문입니다. 부트 스트랩 4가 업데이트되는 업데이트 명령을 실행하십시오.

또한 부트 스트랩 4와 함께 LESS 또는 SCSS를 사용하는 것이 좋습니다. 강력하고 리팩토링하기 쉽습니다.

바우어를 설치하려면 다음 단계를 따르십시오.

1) https://nodejs.org/en/ 에서 해당 OS에 LTS nodeJS를 설치 하십시오.

2) 전 세계적으로 bower package manager 설치 : npm install -g bower

3) 설치 git: https://git-scm.com/

4) 부트 스트랩 4를 설치하십시오.

에서 web당신 젠토 사용자 정의 테마의 디렉토리

예를 들어 : 터미널 열기 <Magento root>/app/design/frontend/MyCustom/theme/web/

부트 스트랩 4를 설치하려면이 명령을 실행하십시오. bower install bootstrap4

5) 그런 다음 기본 레이아웃 노드에서 글꼴, 부트 스트랩 CSS 및 부트 스트랩 JS를 추가 Magento_Theme하여 사용자 정의 테마의 모듈 에있는 모든 페이지에서 부 스트랩을 작동시켜야합니다 .

우리는 gulp를 사용하여 SCSS를 CSS로 컴파일합니다.

— 아난 트
소스

bower package manager를 사용하는 방법?

— Magecode

여기에서 노드를 다운로드해야합니다 : link . Linux를 사용하는 경우 해당 패키지 관리자를 사용하십시오. 그런 다음 다음 명령을 사용하여 bower를 설치하십시오 sudo npm install -g bower.. bower를 설치 한 후 테마 디렉토리에 js / css 패키지를 설치하십시오 :app/design/frontend/My/Theme/

— Ananth

여기서 기본 설치 디렉토리 를 .bowerrc 구성 파일 bower_components을 web사용 하도록 변경해야 합니다.

— Ananth

1

Bower는 더 이상 관련이 없다고 생각합니다. Bower 팀은 프론트 엔드 프로젝트에 Yarn 또는 Webpack 또는 Parcel을 사용할 것을 권장합니다.

— phagento

먼저 package.jsonBootstrap 4 파일을 열면 files배열 키가 표시되면 일치하는 파일 형식 만 프로젝트 디렉토리에 추가됨을 보여줍니다. files키는 Bower 명령에서만 사용됩니다. Bootstrap을 제공하거나 다시 컴파일하려면 Yarn을 시도해야합니다. 프로젝트에 불필요한 파일 / 디렉토리가 추가되기 때문입니다. Webpack과 Parcel은 프론트 엔드에 JavaScript를 사용하도록 컴파일 한 노드 프로젝트 용입니다.

— Ananth

5

위의 답변을 읽은 후 Bootstrap 4를 모듈에 넣고 CDN을 사용하여 Bootstrap 파일을 대신 연결하십시오.

기본 모듈을 만드는 방법을 알고 있다고 가정합니다. 그렇지 않은 경우 여기를 참조 하십시오 . 단계는 다음과 같습니다.

app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xml다음 코드를 사용하여 파일 을 작성하십시오 .

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link rel="stylesheet"  type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />   
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
    </head>
</page>

모듈을 활성화하고 setup:upgrade명령을 실행 하십시오.

혜택:

테마가 활성화 또는 비활성화 되더라도 모든 테마에 한 번에 적용
시스템에 파일을 다운로드 할 필요가 없습니다
업데이트가 매우 쉽습니다. 필요한 경우 CDN 링크 만 교체하면됩니다. Bootstrap 5, 6, 7로 업데이트 할 때 파일을 컴파일하고 바꿀 필요가 없습니다 ...
하나의 간단한 명령으로 Bootstrap을 활성화 및 비활성화 할 수 있습니다.
아무 것도 무시할 필요가 없습니다. 모든 것이 현재 코드 위에 있습니다.
시간이 많이 걸리는 정적 배포를 실행할 필요가 없습니다.

Magento 2.2.4에서 테스트되었지만 모든 Magento 2.X 버전에서 작동합니다. EDIT *는 링크 태그 href를 src로 변경하여 devdoc과 인라인되도록했습니다. 참고:

— 파이 ick
소스

CDN이 때때로 느려질 수 있습니다.

— phagento

나는 얻는다The attribute 'integrity' is not allowed.

— Black