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

J'ai un site qui utilise Bootstrap. Techniquement, je suis en utilisant Bootstrap 4 pour le moment. Je tiens à effet de levier Accéléré les Pages Mobiles (AMP) dans le public face à des parties de ma page. Cependant, j'ai plusieurs erreurs que je n'arrive pas à secouer. Cela me demandez, puis-je encore utiliser Bootstrap avec une Accélération de la Page Mobile?

Je suis même permis d'utiliser le JavaScript dans Accéléré les Pages Mobiles? Bootstrap a le JavaScript pour le hamburger menu sur les téléphones mobiles. Pourtant, lorsque je lance le programme de validation, je vois des erreurs comme:

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.

Donc, retour à ma question. Est-il possible d'avoir un Bootstrap 4 site qui utilise Accéléré les Pages Mobiles?

Merci!

source d'informationauteur user70192

  1. 9

    Droite maintenant, vous ne pouvez pas utiliser bootstrap avec AMPLI car il insère beaucoup d'inutiles CSS et de l'AMP est optimisé pour les performances, 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 problème d'origine sur github: https://github.com/ampproject/amphtml/issues/2413

  2. 5

    Vous pouvez créer un personnalisé de démarrage de la version à partir de: Personnaliser Bootstrap

    Décochez inutile de propriétés et de les exporter. Il doit être inférieur à 50 ko. Supprimer tout "!important" de la règle et de la mettre dans votre site css.

  3. 5

    Essayer cette amorce 4 CSS 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 de bootstrap 4 de la fourche.
    Tous les éléments 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 la "scss/bootstrap-amp.scss" fichier et de le recompiler à l'aide de:

    $ npm run amp-css

    Information: Comme @Filnor avis, c'est fourchue et modifié par moi.

  4. 4

    Je me demandais ce trop. Sur la page github pour l'AMPLI projet, il déclare que

    Il réalise une performance fiable en limitant certaines parties de HTML, CSS et JavaScript. Ces restrictions sont appliquées avec un validateur qui est livré avec l'AMPLI de HTML. Pour compenser ces limitations AMP HTML définit un ensemble d'éléments personnalisés de contenu riche au-delà de HTML de base.

    De sorte que vous ne pouvez pas utiliser la coutume JS comme vous avez l'habitude de faire. Au lieu de cela, vous avez à construire les pages de l'AMPLI de façon et d'utiliser des éléments, comme spécifié par eux.

  5. 2

    Pour se débarrasser de l'erreur avec la taille maximale de l'auteur du CSS, vous pouvez également procéder comme suit lorsque vous souhaitez utiliser AMP et Bootstrap ensemble:

    • mettre l'ensemble de votre css et poignet " css dans un fichier css, permet de dire entire.css
    • Télécharger et installer https://github.com/purifycss/purifycss
    • utilisation purifier: purifycss entire.css yourpage.html --min --info --out minified.css
    • si minified.css est plus petit que 50k alors vous pouvez mettre le contenu de ce fichier dans <style amp-custom>
    • si non, vous pouvez utiliser des css en ligne minifiers /compresseurs.

    EDIT:
    Il n'y a malheureusement un problème qui est difficile à contourner le problème. Bootstrap utilise dans de nombreux endroits !important mot-clé, qui est limité par AMP. Le AMP validator montre cette erreur en premier lorsque vous avez personnalisé CSS ci-dessous 50kb.

  6. 0

    Que par l'AMPLI spécifications que vous ne pouvez utiliser du css avec un total max de la taille de 50 ko. Vous pouvez utiliser bootstrap css et des composants de l'AMPLI si ces composants ne comptez pas sur bootstrap.js depuis AMPLI dosent permettre 3ème partie JS à partir de maintenant.

    Plus, vous devez supprimer !important partout où il est utilisé dans le bootstrap css AMP limite l'utilisation de !important en css.