web-dev-qa-db-fra.com

Utilisation de pages mobiles accélérées avec Bootstrap

J'ai un site Web qui utilise Bootstrap. Techniquement, j'utilise Bootstrap 4 pour le moment. Je souhaite exploiter les pages mobiles accélérées (AMP) dans les parties publiques de ma page. Cependant, j'ai plusieurs erreurs que je n'arrive pas à ébranler. Est-ce que je peux même utiliser Bootstrap avec une page mobile accélérée?

Suis-je même autorisé à utiliser JavaScript dans les pages mobiles accélérées? Bootstrap a JavaScript pour le menu des hamburgers sur les téléphones mobiles. Pourtant, lorsque je lance le validateur, je vois des erreurs telles que:

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.

Revenons donc à ma question. Est-il possible d'avoir un site Bootstrap 4 qui utilise Accelerated Mobile Pages?

Merci!

htmlcsspagespeedaccelerated-mobile-page
13
user70192

Pour le moment, vous ne pouvez pas utiliser bootstrap avec AMP car cela insère beaucoup de CSS inutiles et AMP est optimisé pour la performance, mais vous pouvez utiliser font-awesome dans AMP HTML en l'incluant comme suit:

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

Voir le numéro original sur github: https://github.com/ampproject/amphtml/issues/2413

10
Ksenia

Vous pouvez créer une version d'amorçage personnalisée à partir de: Personnaliser l'amorçage

Décochez les propriétés inutiles et exportez-les. Ce doit être moins de 50kb. Supprimez toutes les règles "! Important" et insérez-les dans votre site sous forme de fichier css intégré.

5
Serdar Değirmenci

Essayez ce CSS bootstrap 4 préparé pour AMP project: https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

Ce projet est basé sur l'original du bootstrap 4 fork. Tous les composants chargés dans le fichier CSS sont placés: https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

Si vous avez besoin d'ajouter des composants personnalisés, vous pouvez ajouter dans le fichier "scss/bootstrap-amp.scss" et recompiler en utilisant:

$ npm run amp-css

Divulgation: Comme @Filnor le remarque, il a été créé et modifié par moi.

5
Jupeter

Je me le demandais aussi. Sur la page github du projet AMP, il est indiqué que 

Il réalise des performances fiables en limitant certaines parties de HTML, CSS et JavaScript. Ces restrictions sont appliquées avec un validateur fourni avec AMP HTML. Pour compenser ces limitations, AMP HTML définit un ensemble d'éléments personnalisés pour un contenu enrichi allant au-delà du langage HTML de base.

Vous ne pouvez donc pas utiliser JS personnalisé comme vous le faites habituellement. Au lieu de cela, vous devez créer les pages de la manière AMP et utiliser des éléments personnalisés comme ils le spécifient.

4
Neum

Pour supprimer l'erreur avec la taille maximale du code CSS de l'auteur, vous pouvez également suivre les étapes suivantes lorsque vous souhaitez utiliser AMP et Bootstrap ensemble: 

  • mettre tous les fichiers css et css de votre bootstraps dans un seul fichier css, disons entire.css
  • Téléchargez et installez https://github.com/purifycss/purifycss
  • utilisez purify: purifycss entire.css yourpage.html --min --info --out minified.css
  • si minified.css est inférieur à 50 Ko, vous pouvez mettre le contenu de ce fichier dans <style amp-custom>
  • si ce n'est pas le cas, vous pouvez utiliser l'un des compresseurs et des minifiers/css en ligne.

EDIT: Il existe malheureusement un problème difficile à résoudre. Bootstrap utilise dans de nombreux endroits !important mot-clé, qui est restreint par AMP. Le AMP validator affiche cette erreur en premier lorsque vous avez obtenu avec CSS personnalisé ci-dessous 50kb.

2
pidabrow

Conformément à la spécification AMP, vous ne pouvez utiliser que des fichiers CSS intégrés d’une taille maximale totale de 50 Ko. Vous pouvez utiliser Bootstrap css et des composants avec AMP si ces composants ne reposent pas sur bootstrap.js car AMP dosent autorise JS tiers à partir de maintenant. 

De plus, vous devez supprimer !important où qu'il soit utilisé dans bootstrap css car AMP restreint l'utilisation de !important dans les css en ligne.

0
Mohammad Adnan Khan