使用 Bootstrap 加速移动页面答案

【问题标题】：Using Accelerated Mobile Pages with Bootstrap使用 Bootstrap 加速移动页面
【发布时间】：2016-06-27 21:08:58
【问题描述】：

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

谢谢！

【问题讨论】：

标签： html css pagespeed accelerated-mobile-page

【解决方案1】：

现在您不能将 bootstrap 与 AMP 一起使用，因为它会插入许多不必要的 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

【讨论】：

【解决方案2】：

试试这个为 AMP project 准备的 bootstrap 4 CSS： 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 通知的那样，它是由我分叉和修改的。

【讨论】：

请透露这是您自己的图书馆。
老实说，你必须经历的依赖数量才能让它工作是不值得的，它为需要“ruby”> 2.5 作为 gem 提供的依赖项的错误也不值得。
这个有更新吗？它已经 3 岁了。另外，Bootstrap 的 js 部分会发生什么？我以为 AMP 只允许一个小的 CSS 文件？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

为了消除作者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 限制。当您在50kb 下方使用自定义CSS 时，AMP validator 首先会显示此错误。

【讨论】：

【解决方案6】：

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

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

【讨论】：

不确定我是否正确阅读了您的答案，或者仅允许内联样式的部分是否不正确。阅读文档，您似乎可以拥有内部样式表（即在标签中）。但不是内联样式请参阅ampproject.org/docs/guides/responsive/style_pages

【解决方案7】：

我知道这个问题很老，但最近（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

【讨论】：