logo标签列表

使用Bootstrap与加速移动页面（AMP）

htmlcsspagespeedaccelerated-mobile-page
14
我有一个使用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网站？

谢谢！

7个回答
10

现在你不能在AMP中使用Bootstrap，因为它会插入很多不必要的CSS，而AMP是针对性能进行优化的。但是你可以通过以下方式将Font Awesome包含在AMP HTML中：

<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

8
尝试使用为AMP 项目准备的 Bootstrap 4 CSS： https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css。 此项目基于原始的 Bootstrap 4 分支。 CSS 文件中加载的所有组件都放在以下位置： https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss。 如果需要添加自定义组件，则可以在 "scss/bootstrap-amp.scss" 文件中进行添加，并使用以下命令重新编译：
$ npm run amp-css

声明：如@Filnor所指出，此项目是我进行了分支和修改后的版本。

3
请明确说明这是您自己的图书馆。 - Filnor
说实话，为了让它正常工作而必须经过的依赖项数量不值得，而且由于需要 "ruby" > 2.5 作为 gem 而产生的依赖项错误也不值得。 - sfxworks
1
这个有更新吗？它已经三年了。另外，Bootstrap的js部分会发生什么？我以为AMP只允许一个小的CSS文件？ - Csaba Toth
5
你可以从定制Bootstrap创建自定义的版本。
取消不必要的属性并导出它。它必须小于50kb。删除每个"!important"规则并将其作为内联css放入您的网站中。
4

我也在思考这个问题。在AMP项目的github页面上，它指出：

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

因此，您不能像以往一样使用自定义JS。相反，您必须按照AMP方式构建页面，并使用所指定的自定义元素。

3
为了消除作者CSS的最大大小错误，当您想要同时使用AMP和Bootstrap时，您还可以执行以下步骤：
  • 将您的整个CSS和Bootstrap的CSS放入一个CSS文件中，比如说entire.css
  • 下载并安装https://github.com/purifycss/purifycss
  • 使用purify: purifycss entire.css yourpage.html --min --info --out minified.css
  • 如果minified.css小于50k，则可以将此文件的内容放入<style amp-custom>中
  • 如果不是，则可以使用在线CSS缩小器/压缩器之一。
编辑： 不幸的是，有一个问题很难解决。Bootstrap在许多地方使用!important关键字，这是AMP所限制的。当您使用自定义CSS低于50kb时，AMP验证器首先显示此错误。
0
根据AMP规范，您只能使用总最大大小为50kb的内联CSS。如果这些组件不依赖于bootstrap.js，则可以在AMP中使用bootstrap CSS和组件，因为AMP目前不允许第三方JS。
此外，您需要删除bootstrap css中使用的任何!important，因为AMP限制内联css中使用!important。
不确定我是否正确地理解了您的答案，或者关于仅允许内联样式的部分是否不正确。从文档中阅读，似乎您可以拥有内部样式表（即在<head> </head>标记中），但不能使用内联样式。请参见https://www.ampproject.org/docs/guides/responsive/style_pages。 - NivF007
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接