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!
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
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é.
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.
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.
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:
entire.css
purifycss entire.css yourpage.html --min --info --out minified.css
minified.css
est inférieur à 50 Ko, vous pouvez mettre le contenu de ce fichier dans <style amp-custom>
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
.
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.