使用带Bootstrap的加速移动页面

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

试试这个bootstrap 4 CSS准备AMP project:https: //github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

该项目基于原始bootstrap 4 fork.CSS文件中加载的所有组件都放在:https: //github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

如果需要添加自定义组件,可以添加"scss/bootstrap-amp.scss"文件并使用以下命令重新编译:

$ npm run amp-css

披露:正如@Filnor通知,它由我分叉和修改.

Answer 4

我也想知道这个问题。在 AMP 项目的 github 页面上，它指出

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

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