Html 通过 Bootstrap 使用 Accelerated Mobile Pages

Using Accelerated Mobile Pages with Bootstrap

提问by user70192

I have a website that uses Bootstrap. Technically, I'm using Bootstrap 4 at the moment. I want to leverage Accelerated Mobile Pages (AMP) in the publicly-facing parts of my page. However, I have several errors that I can't seem to shake. This has me wondering, can I even use Bootstrap with an Accelerated Mobile Page?

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

Am I even allowed to use JavaScript in Accelerated Mobile Pages? Bootstrap has JavaScript for the hamburger menu on mobile phones. Yet, when I run the validator, I see errors like:

我什至可以在 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.

So, back to my question. Is it possible to have a Bootstrap 4 site that uses Accelerated Mobile Pages?

那么，回到我的问题。是否可以拥有使用 Accelerated Mobile Pages 的 Bootstrap 4 站点？

Thanks!

谢谢！

回答by Ksenia

Right now you cannot use bootstrap with AMP because it inserts a lot of unnecessary CSS and AMP is optimized for performance, but you can use font-awesome in AMP HTML by including it like so:

现在您不能将 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">

See the original issue on github: https://github.com/ampproject/amphtml/issues/2413

在github上查看原始问题：https: //github.com/ampproject/amphtml/issues/2413

回答by Jupeter

Try this bootstrap 4 CSS prepared for AMP project: https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

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

This project is based on orginal bootstrap 4 fork. All components loaded in the CSS file are placed: https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

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

If you need add custom components, you can add in the "scss/bootstrap-amp.scss" file and recompile using:

如果您需要添加自定义组件，您可以在“scss/bootstrap-amp.scss”文件中添加并使用以下命令重新编译：

$ npm run amp-css

Disclosure: As @Filnor notice, it's forked and modified by me.

披露：正如@Filnor 通知的那样，它是由我分叉和修改的。

回答by Serdar De?irmenci

You can create a custom bootstrap version from: Customize Bootstrap

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

Uncheck unnecessary properties and export it. It must be less than 50kb. Remove every "!important" rule and put it in your site as inline css.

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

回答by Neum

I was wondering this too. On the github page for the AMP project it states that

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

It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.

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

So you cannot use custom JS like you are used to doing. Instead you have to build out the pages the AMP way and use custom elements as specified by them.

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

回答by pidabrow

To get rid of error with maximal size of author's CSS, you can also do following steps when you want to use AMPand Bootstraptogether:

为了摆脱作者CSS最大尺寸的错误，您还可以在要使用AMP和Bootstrap一起使用时执行以下步骤：

• put your entire css and bootstraps' css into one css file, lets say entire.css
• Download and install https://github.com/purifycss/purifycss
• use purify: purifycss entire.css yourpage.html --min --info --out minified.css
• if minified.cssis smaller than 50k then you can put content of this file in <style amp-custom>
• if not, you can use on of online css minifiers / compressors.

• 把你的整个 css 和 bootstraps 的 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 压缩器/压缩器。

EDIT:There is unfortunately one problem that is hard to workaround. Bootstrapuses in many places !importantkeyword, which is restrictedby AMP. The AMP validatorshows this errors first when you got with custom CSSbelow 50kb.

编辑：不幸的是，有一个问题很难解决。Bootstrap在很多地方使用!important关键字，这也是制约的AMP。在AMP validator第一显示了这个错误时，你有自定义CSS如下50kb。

回答by Mohammad Adnan Khan

As per the AMP specification you can only use inline css with a total max size of 50kb. You can use bootstrap css and components with AMP if those components do not rely on bootstrap.js since AMP dosent allow 3rd party JS as of now.

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

Plus, you need to remove !importantwherever it is used in bootstrap css as AMP restricts the use of !importantin inline css.

另外，您需要删除!importantbootstrap css 中使用它的任何地方，因为 AMP 限制使用!importantinline css。