webentwicklung-frage-antwort-db.com.de

Beschleunigte mobile Seiten mit Bootstrap verwenden

Ich habe eine Website, die Bootstrap verwendet. Technisch verwende ich momentan Bootstrap 4. Ich möchte AMP (Accelerated Mobile Pages) in den öffentlich zugänglichen Bereichen meiner Seite nutzen. Ich habe jedoch einige Fehler, die ich scheinbar nicht schütteln kann. Ich frage mich, kann ich Bootstrap sogar mit einer Accelerated Mobile Page verwenden?

Darf ich in beschleunigten mobilen Seiten sogar JavaScript verwenden? Bootstrap hat JavaScript für das Hamburger-Menü auf Mobiltelefonen. Wenn ich den Validator starte, sehe ich jedoch Fehler wie:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'.
The attribute 'rel' in tag 'link rel=' is set to the invalid value 
The tag 'script' is disallowed except in specific forms.

Also zurück zu meiner Frage. Kann ich eine Bootstrap 4-Site haben, die Accelerated Mobile Pages verwendet?

Vielen Dank!

htmlcsspagespeedaccelerated-mobile-page
13
user70192

Im Moment können Sie Bootstrap nicht mit AMP verwenden, da dies eine Menge unnötiges CSS einfügt und AMP für die Leistung optimiert ist. Sie können jedoch font-awesome in AMP HTML verwenden, indem Sie es wie folgt einfügen:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Siehe die ursprüngliche Ausgabe auf github: https://github.com/ampproject/amphtml/issues/2413

10
Ksenia

Sie können eine benutzerdefinierte Bootstrap-Version erstellen: Bootstrap anpassen

Deaktivieren Sie nicht benötigte Eigenschaften und exportieren Sie sie. Es muss weniger als 50 kb betragen. Entfernen Sie jede "! Wichtige" Regel und fügen Sie sie als Inline-CSS in Ihre Site ein.

5
Serdar Değirmenci

Versuchen Sie dieses Bootstrap 4-CSS, das für AMP project vorbereitet ist: https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

Dieses Projekt basiert auf der originalen Bootstrap 4-Gabel. Alle Komponenten, die in die CSS-Datei geladen werden, werden platziert: https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

Wenn Sie benutzerdefinierte Komponenten hinzufügen möchten, können Sie die Datei "scss/bootstrap-amp.scss" hinzufügen und mit folgendem Befehl neu kompilieren:

$ npm run amp-css

Offenlegung: Wie @Filnor bemerkt, wird es von mir gegabelt und modifiziert.

5
Jupeter

Ich habe mich auch gefragt. Auf der Github-Seite für das AMP-Projekt wird dies angegeben 

Durch die Einschränkung einiger Bereiche von HTML, CSS und JavaScript wird eine zuverlässige Leistung erreicht. Diese Einschränkungen werden mit einem Validierer erzwungen, der im Lieferumfang von AMP HTML enthalten ist. Um diese Einschränkungen zu kompensieren, definiert AMP HTML eine Reihe von benutzerdefinierten Elementen für Rich Content, die über das grundlegende HTML hinausgehen.

Sie können also keine benutzerdefinierten JS verwenden, wie Sie es gewohnt sind. Stattdessen müssen Sie die Seiten AMP-artig ausbauen und benutzerdefinierte Elemente verwenden, wie von ihnen angegeben.

4
Neum

Um den Fehler mit der maximalen Größe des CSS des Autors zu beseitigen, können Sie auch die folgenden Schritte ausführen, wenn Sie AMP und Bootstrap zusammen verwenden möchten: 

  • geben Sie Ihre gesamten CSS- und Bootstraps-CSS in eine CSS-Datei ein, sagen wir entire.css
  • Laden Sie herunter und installieren Sie https://github.com/purifycss/purifycss
  • verwende reinigen: purifycss entire.css yourpage.html --min --info --out minified.css
  • wenn minified.css kleiner als 50k ist, können Sie den Inhalt dieser Datei in <style amp-custom> eingeben.
  • wenn nicht, können Sie einen Online-CSS-Minifier/Kompressor verwenden.

EDIT:.__: Leider gibt es ein Problem, das schwer zu lösen ist. Bootstrap verwendet an vielen Stellen !important Schlüsselwort, das eingeschränkt ist von AMP. Der AMP validator zeigt diese Fehler zuerst an, wenn Sie die benutzerdefinierte CSS unter 50kb eingegeben haben.

2
pidabrow

Gemäß der AMP-Spezifikation können nur Inline-CSS mit einer maximalen Gesamtgröße von 50 kb verwendet werden. Sie können bootstrap-css und -Komponenten mit AMP verwenden, wenn diese Komponenten nicht auf bootstrap.js basieren, da AMP-Dosent JS von Drittanbietern ab sofort zulässt. 

Außerdem müssen Sie !important überall dort entfernen, wo es in der Bootstrap-Datei verwendet wird, da AMP die Verwendung von !important in Inline-CSS einschränkt.

0
Mohammad Adnan Khan