Ich habe eine Website, die Bootstrap verwendet. Technisch verwende ich Bootstrap 4 im Moment. Ich möchte Accelerated Mobile Pages (AMP) in den öffentlich zugänglichen Teilen meiner Seite nutzen. Allerdings habe ich einige Fehler, die ich nicht erschüttern kann. Das hat mich gewundert, kann ich sogar Bootstrap mit einer Accelerated Mobile Page verwenden?
Darf ich sogar JavaScript in Accelerated Mobile Pages verwenden? Bootstrap hat JavaScript für das Hamburger-Menü auf Mobiltelefonen. Wenn ich jedoch den Validator aktiviere, sehe ich Fehler wie:
%Vor%Also, zurück zu meiner Frage. Ist es möglich, eine Bootstrap 4-Site zu verwenden, die Accelerated Mobile Pages verwendet?
Danke!
Momentan können Sie kein Bootstrap mit AMP verwenden, da es viel überflüssiges CSS einfügt und AMP für die Performance optimiert ist, aber Sie können font-awesome in AMP HTML verwenden, indem Sie es wie folgt einfügen:
%Vor%Siehe die ursprüngliche Ausgabe auf github: Ссылка
Sie können eine benutzerdefinierte Bootstrap-Version erstellen unter: Bootstrap anpassen
Deaktivieren Sie unnötige Eigenschaften und exportieren Sie sie. Es muss weniger als 50 KB sein. Entferne jede "! Wichtige" Regel und lege sie als CSS in deine Seite.
Ich habe mich auch gefragt. Auf der GitHub-Seite für das AMP-Projekt heißt es:
Es erreicht eine zuverlässige Leistung durch Einschränkung einiger Teile von HTML, CSS und JavaScript. Diese Einschränkungen werden mit einem Validator erzwungen, der mit AMP-HTML ausgeliefert wird. Um diese Einschränkungen zu umgehen, definiert AMP HTML eine Reihe benutzerdefinierter Elemente für Rich Content, die über HTML hinausgehen.
Sie können also kein benutzerdefiniertes JS verwenden, wie Sie es gewohnt sind. Stattdessen müssen Sie die Seiten auf AMP-Weise aufbauen und benutzerdefinierte Elemente verwenden, wie von ihnen festgelegt.
Versuchen Sie dieses Bootstrap 4 CSS vorbereitet für AMP project :
Ссылка
Dieses Projekt basiert auf orginal bootstrap 4 fork. Alle in die CSS-Datei geladenen Komponenten werden platziert: Ссылка
Wenn Sie benutzerdefinierte Komponenten hinzufügen müssen, können Sie die Datei "scss / bootstrap-amp.scss" hinzufügen und mit folgendem Befehl neu kompilieren:
%Vor% Um den Fehler mit der maximalen CSS-Größe des Autors loszuwerden, können Sie auch die folgenden Schritte ausführen, wenn Sie AMP und Bootstrap zusammen verwenden möchten:
entire.css
purifycss entire.css yourpage.html --min --info --out minified.css
minified.css kleiner als 50k ist, können Sie den Inhalt dieser Datei in <style amp-custom> setzen
BEARBEITEN:
Es gibt leider ein Problem, das schwer zu umgehen ist. Bootstrap verwendet an vielen Stellen !important keyword, das ist eingeschränkt durch von AMP . Die AMP validator zeigt diese Fehler zuerst an, wenn Sie mit der benutzerdefinierten CSS unter 50kb fertig sind.
Gemäß der AMP-Spezifikation können Sie nur Inline-CSS mit einer maximalen Gesamtgröße von 50 KB verwenden. Sie können Bootstrap CSS und Komponenten mit AMP verwenden, wenn diese Komponenten nicht auf bootstrap.js angewiesen sind, da AMP dosent JS von Drittanbietern ab sofort zulässt.
Außerdem müssen Sie !important entfernen, wo immer es in Bootstrap-CSS verwendet wird, da AMP die Verwendung von !important in Inline-CSS einschränkt.
Tags und Links html css pagespeed accelerated-mobile-page