Wie füge ich Bootstrap 4 in ein Magento 2 Theme ein?

12

Ich muss Bootstrap 4 in mein benutzerdefiniertes Design einfügen .

Ich füge Bootstrap 3 unter Verwendung der Referenz hinzu:

Wie verwende ich Bootstrap in meinem benutzerdefinierten Design?

Bootstrap 4 funktioniert jedoch nicht.

magento2 css magento2.2.4 framework Magiercode
quelle

Was meinst du mit "nicht arbeiten"?

Schwarz

23

Zum Hinzufügen von Bootstrap 4 in Magento 2.2.3 (getestet) und höher in Ihrem benutzerdefinierten Design führen Sie die folgenden Schritte aus

1) Bootstrap-CSS-Dateien im Webordner

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

THEME_LOCATION\web\css\bootstrap.css

Rufen Sie Bootstrap-CSS-Dateien in default_head_blocks auf

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

CSS hinzufügen

<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) Hinzufügen von Js-Dateien in Bündelform und nicht in Einzelform, weil Einzel nicht funktioniert

Platz bootstrap.bundle.js Dateien können von Download hier

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

Rufen Sie Bootstrap Js Into requirejs-config.js auf

THEME_LOCATION\Magento_Theme\requirejs-config.js

Code für

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

Fügen Sie nach Ihrem bereits vorhandenen Skript-Tag den folgenden Code in der Datei header.phtml hinzu

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Code:

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

Befehle zum Ausführen unter:

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

php bin/magento cache:flush

Hinweis: Getestet mit Magento 2.2.3 und den neuesten Versionen 2.2.6. Auch getestet am 2.3.3

Aktualisiert : Laden Sie den von hier kompilierten Bootstrap herunter und verwenden Sie das Bundle js

Manoj Deswal
quelle

OK danke. Ich werde diese Lösung versuchen. BTW Was ist der Unterschied zwischen bootstrap.bundle.js und bootstrap.js?

Magiercode

Popper.js im Bundle js enthalten ..... und jquery ist bereits in Magento enthalten .... Popper funktioniert nicht alleine, sondern als Bundle

Manoj Deswal

@Magecode funktioniert es auf Magento 2.2.4?

Manoj Deswal

1

Ich kann es endlich herausgefunden ... Ich legte die js in MY_THEME / web / js statt MY_THEME / Magento_Theme / web / js im sorry

Schwarz

1

Dies war die Standardarbeitsweise vor 2.2.3, aber in 2.2.3 funktionierte es nicht und ich entdeckte den obigen Weg. Aber es funktioniert immer noch in 2.3.2 .... So wie du es gemacht hast, ist es auch richtig

Manoj Deswal

11

Sie können Bootstrap auf diese Weise hinzufügen, indem Sie die folgenden Schritte ausführen : Hinweis: Diese Lösung funktioniert nicht mit Magento 2.2.3 und höher

1) Platzieren Sie Ihren JS und CSS unter der Position

/ app / design / frontend / anbietername / themenname / web / css

/ app / design / frontend / anbietername / themenname / web / js

2) Rufen Sie die Dateien in Ihrer Datei default_head_blocks.xml auf

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

Fügen Sie diese Codezeile hinzu

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

3) Führen Sie die folgenden Befehle aus

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

Mayur Rathod
quelle

Und wie funktioniert es dann mit Magento 2.2.3 und höher?

Black

6

Sie sollten den Bower-Paket-Manager verwenden, um Bootstrap 4 in Ihrem Theme-Webordner hinzuzufügen.

WARUM? Weil es ständige Updates gibt und einfach zu verwalten ist. Führen Sie den Befehl update aus, um die Aktualisierung von Bootstrap 4 durchzuführen.

AUCH: Wir bevorzugen es, LESS oder SCSS mit Bootstrap 4 zu verwenden. Es ist robust und einfach umzugestalten.

Befolgen Sie die folgenden Schritte, um die Laube zu installieren:

1) Installieren Sie LTS nodeJS auf Ihrem jeweiligen Betriebssystem von: https://nodejs.org/en/

2) Installieren Sie den bower package manager global: npm install -g bower

3) Installieren Sie gitvon: https://git-scm.com/

4) Installieren Sie Bootstrap 4:

Im webVerzeichnis Ihres Magento benutzerdefinierten Themes

Zum Beispiel: Öffnen Sie das Terminal um <Magento root>/app/design/frontend/MyCustom/theme/web/

Führen Sie diesen Befehl aus, um Bootstrap 4 zu installieren: bower install bootstrap4

5) Danach müssen Sie Schriftarten, Bootstrap-CSS und Bootstrap-JS im Standard-Layout-Knoten hinzufügen, um Boostrap auf jeder Seite im Magento_ThemeModul in Ihrem benutzerdefinierten Design auszuführen .

Wir verwenden gulp, um SCSS zu CSS zu kompilieren.

Ananth
quelle

Wie benutze ich den bower package manager?

Magiercode

Sie müssen den Knoten von hier herunterladen: Link . Wenn Sie Linux verwenden, verwenden Sie den entsprechenden Paketmanager. Dann installiert Bower mit diesem Befehl: sudo npm install -g bower. Nach der Installation von bower installiere js / css packages in deinem Theme-Verzeichnis:app/design/frontend/My/Theme/

Ananth

Hier müssen Sie das Standardinstallationsverzeichnis von bower_componentsin webdie Konfigurationsdatei .bowerrc ändern .

Ananth

1

Ich denke, Bower ist nicht mehr relevant. Das Bower-Team empfiehlt sogar die Verwendung von Yarn, Webpack oder Parcel für Frontend-Projekte.

Phagento

Öffnen Sie zuerst die package.jsonDatei von Bootstrap 4. Wenn Sie den filesArray-Schlüssel sehen, wird nur der Dateityp angezeigt, der Ihrem Projektverzeichnis hinzugefügt wird. filesDie Taste wird nur vom Bower-Befehl verwendet. Wenn Sie einen Beitrag leisten oder Bootstrap neu kompilieren möchten, sollten Sie Yarn ausprobieren. Weil es unnötige Dateien / Verzeichnisse zum Projekt hinzufügt. Webpack und Parcel sind für Knotenprojekte gedacht, die mit JavaScript für das Frontend kompiliert werden.

Ananth

5

Nachdem ich die obigen Antworten gelesen habe, habe ich einen weiteren Vorschlag: Platzieren Sie Bootstrap 4 in einem Modul und verwenden Sie stattdessen CDN, um die Bootstrap-Dateien zu verknüpfen.

Ich gehe davon aus, dass Sie wissen, wie man ein Basismodul erstellt. Wenn nicht, können Sie hier verweisen . Also hier sind die Schritte:

Erstellen Sie eine Datei app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlmit den folgenden Codes:

<?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>

Aktivieren Sie das Modul und führen Sie den setup:upgradeBefehl aus, das ist alles!

Leistungen:

Auf ALLE Themen gleichzeitig anwenden, unabhängig davon, ob das Thema aktiv oder inaktiv ist
Sie müssen keine Dateien in Ihr System herunterladen
Sehr einfach zu aktualisieren. Ersetzen Sie einfach den CDN-Link. Dies ist die einzige Aufgabe, die Sie bei Bedarf ausführen müssen. Sie müssen keine Dateien kompilieren und ersetzen, wenn Sie auf Bootstrap 5, 6, 7 aktualisieren ...
Sie können Bootstrap mit EINEM einfachen Befehl aktivieren und deaktivieren.
Sie müssen nichts außer Kraft setzen. Alles ist auf den aktuellen Codes.
Es ist keine statische Bereitstellung erforderlich, die zeitaufwändig sein kann

Getestet auf Magento 2.2.4, sollte aber auf allen Magento 2.X-Versionen funktionieren. EDIT * hat die Link-Tags href in src geändert, um mit den devdocs übereinzustimmen. Referenz:

PY Yick
quelle

CDN kann manchmal langsam sein.

Phagento

Ich bekommeThe attribute 'integrity' is not allowed.

Black

Wie füge ich Bootstrap 4 in ein Magento 2 Theme ein?

Antworten: