web-dev-qa-db-ja.com

Bootstrapでの高速モバイルページの使用

Bootstrapを使用するWebサイトがあります。技術的には、現在Bootstrap 4を使用しています。ページの公開部分でAccelerated Mobile Pages（AMP）を活用したいのですが、いくつかのエラーがあります。揺れているように見えません。これは疑問です。AcceleratedMobile PageでBootstrap=を使用できますか？

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サイトを作成できますか？

ありがとう！

htmlcsspagespeedaccelerated-mobile-page
13
user70192

現在、AMPではbootstrapを使用できません。多くの不要なCSSが挿入され、AMPはパフォーマンスが最適化されていますが、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/241

10
Ksenia

カスタムのbootstrapバージョンを作成できます： Customize Bootstrap

不要なプロパティのチェックを外してエクスポートします。 50kb未満でなければなりません。すべての「！important」ルールを削除し、インラインcssとしてサイトに配置します。

5
Serdar Değirmenci

試してみてくださいbootstrap 4 CSS for 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が通知しているように、それは私によって分岐され、変更されています。

5
Jupeter

私もこれを疑問に思っていました。 AMPプロジェクトのgithubページには、

HTML、CSS、およびJavaScriptの一部を制限することにより、信頼性の高いパフォーマンスを実現します。これらの制限は、AMP HTMLに同梱されているバリデーターで実施されます。これらの制限を補うために、AMP HTMLは基本的なHTMLを超えたリッチコンテンツのカスタム要素のセットを定義します。

そのため、慣れているようにカスタムJSを使用することはできません。代わりに、AMPの方法でページを構築し、それらの指定に従ってカスタム要素を使用する必要があります。

4
Neum

作成者のCSSの最大サイズでエラーを取り除くために、AMPとBootstrapを一緒に使用する場合は、次の手順を実行することもできます。

  • cssとbootstrapsのcss全体を1つのcssファイルに入れます。たとえば、entire.css
  • ダウンロードしてインストールします https://github.com/purifycss/purifycss
  • usepurify：purifycss entire.css yourpage.html --min --info --out minified.css
  • if minified.cssが50kより小さい場合、このファイルのコンテンツを<style amp-custom>
  • そうでない場合は、オンラインのCSSミニファイナー/コンプレッサーを使用できます。

EDIT：残念ながら、回避するのが難しい問題が1つあります。 Bootstrapは多くの場所で使用します!importantキーワード、AMPによって制限されています。 AMP validatorは、カスタムCSS以下50kb。

2
pidabrow

AMP仕様に従って、合計最大サイズが50kbのインラインCSSのみを使用できます。現在、AMP dosentはサードパーティのJSを許可しているため、それらのコンポーネントがbootstrap.jsに依存していない場合、AMPでbootstrap= CSSおよびコンポーネントを使用できます。

さらに、AMPはインラインcssでの!importantの使用を制限するため、bootstrap cssで使用される場合は常に!importantを削除する必要があります。

0
Mohammad Adnan Khan