Wie entwickle ich ein Thema mit Twitter Bootstrap in Magento 2?

8

Haben wir eine Schritt-für-Schritt-Anleitung zum Erstellen eines Twitter-Bootstrap-Themas für Magento 2 oder einen Scratch, der für die neueste Version von Magento 2 erstellt wurde? Kann jemand eine gute Methode vorschlagen, um von vorne zu beginnen?

magento2 theme

— Dev
quelle

2

Magento 2 verwendet kein Bootstrap, sondern ein eigenes WENIGER und CSS im Themenkern. Der Herausgeber kann CSS zusammen mit anderen statischen Ansichtsdateien finden und veröffentlichen, die sich im Pub / Verzeichnis befinden. Der Herausgeber unterstützt auch die Vorverarbeitung von Dateien, die veröffentlicht werden, mithilfe einiger Präprozessoren. Der CSS-Präprozessor besteht beispielsweise aus zwei unabhängigen Präprozessoren wie folgt:

WENIGER Präprozessor: Zusammen mit dem WENIGER PHP-Adapter ermöglicht der WENIGER Präprozessor die Verwendung von WENIGER in Magento. CSS-URL-Resolver: Hiermit werden Links aufgelöst, die in CSS-Quelldateien mithilfe des Herausgebers gefunden wurden, und durch die richtigen ersetzt. Hauptvorteile:

Mit LESS können Benutzer Themen schneller und einfacher anpassen. WENIGER Präprozessor- und CSS-URL-Resolver verbessern die Leistung, beschleunigen das Laden von Seiten und machen das System mit der Suchmaschine benutzerfreundlicher.

https://www.ubertheme.com/magento-news/11-exciting-features-magento-2/

Aber wenn Sie Bootstrap in Ihrem Thema verwenden möchten. Sie können diesen Code erstellen. unter Magento_Theme / layout / default_head_blocks.xml. Für mich verwende ich das Porto-Thema. und so fügte porto bootstrap hinzu.

Hey Leute da draußen korrigieren mich, wenn ich falsch liege. aber das basiert auf meiner Erfahrung.

Vielen Dank

— MazeStricks
quelle

Ich erhalte einen großen Fehler wie Fehler: Nicht übereinstimmendes anonymes define () -Modul: Funktion (t, e, n) {"use strict"; Funktion i (t, e) {für (var n = 0; n <e.length; n ++) {var i = e [n]; i.enumerable = i.enumerable ||! 1, i.configurable =! 0, "Wert" in i && (i.writable =! 0), Object.defineProperty (t, i.key, i)}} Funktion s (t, e, n) {Rückgabe e && i (t.prototype, e), n && i (t, n), t} Funktion r () {Rückgabe (r = Object.assign | | Funktion (t) {für (var e = 1; e <Argumente.Länge; e ++) {var n = Argumente [e]; für (var i in n) Object.prototype.hasOwnProperty.call (n, i) && (t [i] = n [i])} return t}). apply (dies, Argumente)} e = e && e.hasOwnProperty ("default")? ...

— Magecode

Können Sie mir hier einen Screenshot schicken?

— MazeStricks

0

Magento 2 wird mit einer direkt eingebauten Lite-Version von Bootstrap geliefert. Sie können die meisten der wichtigsten reaktionsschnellen Funktionen von Bootstrap Stock verwenden. Ich habe festgestellt, dass es einen 404-Fehler gibt, wenn es etwas gibt, das nicht verwendet werden kann, wie z. B. .embed-responsive.

Abgesehen davon müssten Sie Ihr eigenes Thema erstellen und Ihre eigenen Dateien hinzufügen, wie @MazeStricks erwähnt.

— Cary Wolff
quelle

Ja, Sie haben Recht @Cary Wolff, danke für Ihre Informationen.

— MazeStricks