Sử dụng trang trên thiết bị di động được tăng tốc với Bootstrap

Question

Tôi có trang web sử dụng Bootstrap. Về mặt kỹ thuật, tôi đang sử dụng Bootstrap 4 vào lúc này. Tôi muốn tận dụng Trang trên thiết bị di động được tăng tốc (AMP) trong các phần công khai trên trang của tôi. Tuy nhiên, tôi có một số lỗi mà tôi dường như không thể lắc. Điều này khiến tôi băn khoăn, liệu tôi có thể sử dụng Bootstrap với Trang Di động được tăng tốc không?

Tôi thậm chí có được phép sử dụng JavaScript trong Trang trên thiết bị di động được tăng tốc không? Bootstrap có JavaScript cho menu bánh hamburger trên điện thoại di động. Tuy nhiên, khi tôi chạy trình xác thực, tôi thấy các lỗi như:

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. 

Vì vậy, hãy quay lại câu hỏi của tôi. Có thể có một trang Bootstrap 4 sử dụng Accelerated Mobile Pages không?

Cảm ơn!

Answer 1

Tôi cũng đã tự hỏi điều này. Trên trang github cho dự án AMP, nó tuyên bố rằng

Nó đạt được hiệu suất đáng tin cậy bằng cách hạn chế một số phần của HTML, CSS và JavaScript. Những hạn chế này được thực thi với trình xác thực đi kèm với HTML AMP. Để bù đắp cho những hạn chế đó, HTML HTML xác định tập hợp các yếu tố tùy chỉnh cho nội dung đa dạng vượt quá HTML cơ bản.

Vì vậy, bạn không thể sử dụng JS tùy chỉnh như bạn thường làm. Thay vào đó, bạn phải xây dựng các trang theo cách AMP và sử dụng các phần tử tùy chỉnh theo quy định của chúng.

Answer 2

Ngay bây giờ bạn không thể sử dụng bootstrap với AMP vì nó chèn rất nhiều CSS không cần thiết và AMP được tối ưu hóa cho hiệu suất, nhưng bạn có thể sử dụng font-tuyệt vời trong AMP HTML bằng cách bao gồm nó như vậy:

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

Xem vấn đề ban đầu về github: https://github.com/ampproject/amphtml/issues/2413

Answer 3

Theo đặc điểm kỹ thuật AMP, bạn chỉ có thể sử dụng css nội tuyến với tổng kích thước tối đa là 50kb. Bạn có thể sử dụng css bootstrap và các thành phần với AMP nếu các thành phần đó không dựa vào bootstrap.js vì AMP dosent cho phép bên thứ ba JS kể từ bây giờ.

Ngoài ra, bạn cần xóa !important ở bất cứ nơi nào được sử dụng trong css bootstrap vì AMP hạn chế sử dụng !important trong css nội tuyến.

Answer 4

Bạn có thể tạo ra một phiên bản tùy chỉnh bootstrap từ: Customize Bootstrap

tính Bỏ chọn không cần thiết và xuất khẩu nó. Nó phải nhỏ hơn 50kb. Xóa mọi quy tắc "quan trọng" và đặt nó vào trang web của bạn dưới dạng css nội dòng.

Answer 5

Để thoát khỏi lỗi với kích thước tối đa của CSS của tác giả, bạn cũng có thể làm các bước sau đây khi bạn muốn sử dụng AMP và Bootstrap với nhau:

• đưa toàn bộ css của bạn và css bootstraps' vào một tập tin css , cho phép nói entire.css
• Tải về và cài đặt https://github.com/purifycss/purifycss
• sử dụng sạch: purifycss entire.css yourpage.html --min --info --out minified.css
• nếu 012.nhỏ hơn 50k, sau đó bạn có thể đặt nội dung của tệp này vào <style amp-custom>
• nếu không, bạn có thể sử dụng bộ lọc/máy nén css trực tuyến.

EDIT: Có thật không may là một trong những vấn đề mà rất khó để workaround. Bootstrap sử dụng ở nhiều nơi !important từ khóa, bị hạn chế bởi AMP. AMP validator hiển thị lỗi này trước tiên khi bạn nhận được tùy chỉnh CSS bên dưới 50kb.

Answer 6

Hãy thử điều này bootstrap 4 CSS chuẩn bị cho AMP project: https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css

dự án này được dựa trên bootstrap gốc 4 nĩa. Tất cả các thành phần được tải trong file CSS được đặt: https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss

Nếu bạn cần thêm các thành phần tùy chỉnh, bạn có thể thêm vào các tập tin "SCSS/bootstrap-amp.scss" và biên dịch sử dụng:

$ npm run amp-css