Utilizzo di pagine mobili accelerate con Bootstrap

Question

Possiedo un sito Web che utilizza Bootstrap. Tecnicamente, sto usando Bootstrap 4 al momento. Voglio sfruttare Accelerated Mobile Pages (AMP) nelle parti pubbliche della mia pagina. Tuttavia, ho diversi errori che non riesco a scuotere. Questo mi chiede, posso usare anche Bootstrap con una pagina mobile accelerata?

Sono persino autorizzato a utilizzare JavaScript nelle pagine per dispositivi mobili accelerate? Bootstrap ha JavaScript per il menu dell'hamburger sui telefoni cellulari. Tuttavia, quando eseguo il validatore, vedo errori come:

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. 

Quindi, torna alla mia domanda. È possibile avere un sito Bootstrap 4 che utilizza pagine mobili accelerate?

Grazie!

Answer 1

Mi stavo chiedendo anche questo. Nella pagina github per il progetto AMP viene indicato che

Raggiunge prestazioni affidabili limitando alcune parti di HTML, CSS e JavaScript. Queste restrizioni sono applicate con un validatore fornito con AMP HTML. Per ovviare a queste limitazioni, AMP HTML definisce un insieme di elementi personalizzati per i contenuti multimediali oltre l'HTML di base.

Quindi non è possibile utilizzare il JS personalizzato come si è abituati a fare. Invece devi costruire le pagine in modo AMP e usare elementi personalizzati come specificato da loro.

Answer 2

In questo momento non è possibile utilizzare bootstrap con AMP perché inserisce un sacco di inutili CSS e AMP è ottimizzato per le prestazioni, ma è possibile utilizzare font-impressionante in AMP HTML includendo in questo modo:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 

Vedere il problema originale su github: https://github.com/ampproject/amphtml/issues/2413

Answer 3

Come da specifica AMP, è possibile utilizzare solo css in linea con una dimensione massima totale di 50kb. Puoi utilizzare bootstrap css e componenti con AMP se tali componenti non si basano su bootstrap.js poiché il DOS di AMP consente ora il JS di terze parti.

Inoltre, è necessario rimuovere !important ovunque sia utilizzato in bootstrap css poiché AMP limita l'uso di !important in css in linea.

Answer 4

È possibile creare una versione personalizzata di bootstrap da: Customize Bootstrap

Deselezionare proprietà inutili ed esportarlo. Deve essere inferiore a 50kb. Rimuovi ogni regola "! Important" e inseriscila nel tuo sito come css inline.

Answer 5

per sbarazzarsi di errore con la dimensione massima di CSS dell'autore, si può anche fare seguenti punti quando si desidera utilizzare AMP e Bootstrap insieme:

• mettere tutta la tua css e css bootstraps' in un unico file css , consente di dire entire.css
• Scaricare e installare https://github.com/purifycss/purifycss
• uso purificare: purifycss entire.css yourpage.html --min --info --out minified.css
• se 012.è inferiore a 50k, quindi è possibile inserire il contenuto di questo file in <style amp-custom>
• in caso contrario, è possibile utilizzare su minisatori/compressori di css online.

EDIT: c'è purtroppo un problema che è difficile da aggirare. Bootstrap utilizza in molti posti la parola chiave !important, che è limitata entro il AMP. Lo AMP validator mostra questo errore prima quando hai ottenuto con il numero personalizzato CSS al di sotto di 50kb.

Answer 6

Prova questa bootstrap 4 CSS preparato per AMP project: https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

Questo progetto si basa sul originale bootstrap 4 forchetta. Tutti i componenti caricati nel file CSS sono posti: https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

Se avete bisogno di aggiungere componenti personalizzati, è possibile aggiungere nel file "SCSS/bootstrap-amp.scss" e ricompilare utilizzando:

$ npm run amp-css 

Non