Question

我有一个使用Bootstrap的网站。从技术上讲，我现在正在使用Bootstrap 4。我想在页面的公开部分利用加速移动页面（AMP）。但是，我有几个错误，我似乎无法动摇。这让我想知道，我甚至可以使用Bootstrap加速移动页面吗？

我甚至可以在加速移动页面中使用JavaScript吗？ Bootstrap在手机上有汉堡包菜单的JavaScript。然而，当我运行验证器时，我看到如下错误：

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.

所以，回到我的问题。是否可以使用加速移动页面的Bootstrap 4站点？

谢谢！

Answer 1

目前你不能在AMP中使用bootstrap，因为它会插入大量不必要的CSS而AMP会针对性能进行优化，但你可以在AMP HTML中使用font-awesome，方法如下：

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

请参阅github上的原始问题：https://github.com/ampproject/amphtml/issues/2413

Answer 2

您可以从Customize Bootstrap

创建自定义引导程序版本

取消选中不必要的属性并将其导出。它必须小于50kb。删除所有“！important”规则，并将其作为内联css放在您的网站中。

Answer 3

我也想知道这一点。在AMP项目的github页面上，它说明了

通过限制HTML，CSS和JavaScript的某些部分，它实现了可靠的性能。这些限制是使用AMP HTML附带的验证程序强制执行的。为了弥补这些限制，AMP HTML为基本HTML之外的丰富内容定义了一组自定义元素。

所以你不能像以前那样使用自定义JS。相反，您必须以AMP方式构建页面并使用它们指定的自定义元素。

Answer 4

为了摆脱作者CSS最大尺寸的错误，当您想同时使用.和AMP时，您还可以执行以下步骤：

把你的整个css和bootstraps＆＃39; css到一个css文件，让我们说Bootstrap
下载并安装https://github.com/purifycss/purifycss
使用净化：entire.css
如果purifycss entire.css yourpage.html --min --info --out minified.css小于50k，那么您可以将此文件的内容放在minified.css
如果没有，您可以使用在线css minifiers /压缩器。

修改不幸的是，有一个难以解决的问题。 <style amp-custom> Bootstrap使用了!important关键字，受AMP限制。当您使用AMP validator下方的自定义CSS时，50kb会首先显示此错误。

Answer 5

根据AMP规范，您只能使用最大总容量为50kb的内联css。如果这些组件不依赖于bootstrap.js，你可以使用bootstrap css和AMP组件，因为AMP dosent允许第三方JS。

另外，您需要删除引导程序css中使用的!important，因为AMP限制在内联css中使用!important。

Answer 6

我知道这个问题很老，但最近（在 2021 年），我发现了 BootAMP https://www.jssaints.com/bootamp（用于 AMP HTML 的类似 Bootstrap 的 CSS 框架）。

使用它，可以很容易地通过从 Bootstrap 迁移到 BootAMP 来添加 AMP HTML 支持 https://www.jssaints.com/bootamp/docs/introduction

他们还提供了一些现成的 AMP-HTML 模板 https://www.jssaints.com/bootamp/boilerplate

使用带Bootstrap的加速移动页面

6 个答案: