13

我有一个使用 Bootstrap 的网站。从技术上讲，我目前正在使用 Bootstrap 4。我想在我的页面的面向公众的部分中利用 Accelerated Mobile Pages (AMP)。但是，我有几个似乎无法摆脱的错误。这让我想知道，我什至可以将 Bootstrap 与 Accelerated Mobile Page 一起使用吗？

我什至可以在 Accelerated Mobile Pages 中使用 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.

所以，回到我的问题。是否有可能拥有使用 Accelerated Mobile Pages 的 Bootstrap 4 网站？

谢谢！

4

7 回答 7

10
于 2016-08-04T17:39:25.730 回答
7

试试这个 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 通知的那样，它是由我分叉和修改的。

于 2017-05-08T14:34:15.683 回答
5

您可以从以下位置创建自定义引导程序版本：自定义引导程序

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

于 2016-12-02T21:51:05.050 回答
4

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

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

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

于 2016-07-28T19:31:01.263 回答
3

要消除作者 CSS 的最大尺寸的错误，您还可以在要使用时执行以下步骤AMP并Bootstrap一起使用：

  • 把你的整个 css 和引导程序的 css 放到一个 css 文件中，比如说entire.css
  • 下载并安装https://github.com/purifycss/purifycss
  • 使用净化：purifycss entire.css yourpage.html --min --info --out minified.css
  • 如果minified.css小于 50k 那么你可以把这个文件的内容放在<style amp-custom>
  • 如果没有，您可以使用在线 css 缩小器/压缩器。

编辑： 不幸的是，有一个问题很难解决。Bootstrap多处使用!important关键字，受AMP. 当AMP validator您使用CSS下面的自定义时，首先显示此错误50kb。

于 2017-01-10T00:15:12.727 回答
0

根据 AMP 规范，您只能使用总最大大小为 50kb 的内联 css。如果这些组件不依赖于 bootstrap.js，那么您可以将 bootstrap css 和组件与 AMP 一起使用，因为 AMP 目前允许 3rd 方 JS。

另外，您需要删除!important它在引导 css 中使用的任何地方，因为 AMP 限制了!important内联 css 的使用。

于 2016-11-25T02:03:05.423 回答
0

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

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

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

于 2021-01-09T07:08:36.643 回答