Tôi đang sử dụng premailer-rails3gem có chức năng kéo các kiểu nội tuyến cho các email html và tôi đang cố gắng làm cho nó hoạt động với Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
Có vẻ như một số phong cách xuất hiện chính xác, nhưng không phải tất cả chúng. Tôi tự hỏi liệu có ai có một ví dụ làm việc hay về việc đưa css Twitter Bootstrap của họ (có sửa đổi hoặc không) vào một email html không.
Cảm ơn!
Câu trả lời:
Nếu ý của bạn là "Tôi có thể sử dụng cách trình bày theo phong cách của Bootstrap trong email không?" thì bạn có thể, mặc dù tôi chưa biết ai đã làm điều đó. Tuy nhiên, bạn sẽ cần phải mã hóa lại mọi thứ trong bảng.
Nếu bạn đang theo đuổi chức năng, nó phụ thuộc vào nơi email của bạn được xem. Nếu một tỷ lệ đáng kể người dùng của bạn đang sử dụng Outlook, Gmail, Yahoo hoặc Hotmail (và những ứng dụng này thường chiếm khoảng 75% ứng dụng email) thì rất nhiều khả năng của Bootstrap là không thể. Mac Mail, iOS Mail và Gmail trên Android có khả năng hiển thị CSS tốt hơn nhiều, vì vậy nếu bạn đang nhắm mục tiêu chủ yếu đến thiết bị di động thì điều đó không quá tệ.
font-face- bạn chỉ có thể sử dụng hình ảnh bên ngoài. Tất cả các tài nguyên bên ngoài khác (tệp CSS, phông chữ) đều bị loại trừ.:hover, :activecác quốc gia không thể theo kiểu riêngCó là tải của câu trả lời trên SO, và rất nhiều các liên kết khác trên internet nói chung.
Tôi xin lỗi vì đã khôi phục chuỗi cũ này, nhưng tôi chỉ muốn cho mọi người biết rằng có một Bootstrap rất gần giống như khung CSS được tạo riêng cho kiểu email, đây là liên kết: http://zurb.com/ink/
Hy vọng nó sẽ giúp một ai đó.
Ninja chỉnh sửa: Nó đã được đổi tên thành Foundation for Emailsvà liên kết mới là: https://foundation.zurb.com/emails.html
Dưới đây là một số điều bạn không thể làm với email:
- Bao gồm một phần với các phong cách . Apple Mail.app hỗ trợ nó, nhưng Gmail và Hotmail thì không, vì vậy nó không phải là không. Hotmail sẽ hỗ trợ một phần kiểu trong nội dung nhưng Gmail vẫn không.
- Liên kết đến một biểu định kiểu bên ngoài. Không có nhiều ứng dụng email hỗ trợ điều này, tốt nhất hãy quên nó đi.
- Nền-hình ảnh / Vị trí-nền. Gmail cũng là thủ phạm trong vấn đề này.
- Xóa phao của bạn . Gmail một lần nữa.
- Tiền ký quỹ . Vâng, nghiêm túc, Hotmail bỏ qua lợi nhuận. Về cơ bản, mọi định vị CSS đều không hoạt động.
- Phông chữ-mọi thứ . Rất có thể Eudora sẽ bỏ qua bất cứ điều gì bạn cố gắng khai báo bằng phông chữ.
Nguồn: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp có các mẫu email bạn có thể sử dụng - tại đây
Một số tài nguyên khác sẽ giúp bạn
font-sizemang lại cho bạn sự linh hoạt hơn với chi phí rất thấp.
Bạn có thể sử dụng https://github.com/advancedrei/BootstrapForEmail này để đóng gói email của mình.
Gần đây, tôi đã dành một khoảng thời gian để xem xét việc xây dựng các mẫu email html, giải pháp tốt nhất mà tôi tìm thấy là sử dụng http://htmlemailboilerplate.com/ này . Kể từ đó, tôi đã xây dựng 3 mẫu khá phức tạp và chúng đã hoạt động tốt trong các ứng dụng email khách khác nhau.
Xin chào Brian Armstrong, hãy truy cập liên kết này .
Blog này cho bạn biết cách tích hợp Rails với Bootstrap ít hơn (sử dụng premailer-rails).
Nếu bạn đang sử dụng bootstrap sass, bạn có thể làm tương tự:
bắt đầu bằng cách nhập một số tệp sass Bootstrap vào email.css.scss
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';và sau đó trong <head>phần xem của bạn, hãy thêm
<%= stylesheet_link_tag "email" %>
Cách tiếp cận tốt nhất mà tôi đưa ra là sử dụng nhập Sass trên cơ sở đã chọn để kéo các kiểu bootstrap (hoặc bất kỳ kiểu nào khác) của bạn vào email nếu cần.
Đầu tiên, tạo một tệp cha mẹ scss mới giống như email.scsskiểu email của bạn. Điều này có thể trông như thế này:
// Core variables and mixins
@import "css/main/ezdia-variables";
@import "css/bootstrap/mixins";
@import "css/main/ezdia-mixins";
// Import base classes
@import "css/bootstrap/scaffolding";
@import "css/bootstrap/type";
@import "css/bootstrap/buttons";
@import "css/bootstrap/alerts";
// nest conflicting bootstrap styles
.bootstrap-style {
//use single quotes for nested imports
@import 'css/bootstrap/normalize';
@import 'css/bootstrap/tables';
}
@import "css/main/main";
// Main email classes
@import "css/email/zurb";
@import "css/email/main";Sau đó, trong các mẫu email của bạn, chỉ tham chiếu tệp email.css đã biên dịch của bạn, tệp này chỉ chứa các kiểu bootstrap đã chọn được tham chiếu và lồng ghép đúng cách trong email.scss của bạn.
Ví dụ: một số kiểu bootstrap nhất định sẽ xung đột với kiểu bảng đáp ứng của Zurb. Để khắc phục điều đó, bạn có thể lồng các kiểu của bootstrap trong một lớp cha hoặc bộ chọn khác để chỉ gọi các kiểu bảng của bootstrap khi cần thiết.
Bằng cách này, bạn có thể linh hoạt chỉ kéo các lớp học khi cần thiết. Bạn sẽ thấy rằng tôi sử dụng http://zurb.com/, đây là một thư viện email đáp ứng tuyệt vời để sử dụng. Xem thêmhttp://zurb.com/ink/
Cuối cùng, sử dụng một premailer như https://github.com/fphilipe/premailer-rails3đã đề cập ở trên để xử lý kiểu thành css nội tuyến, biên dịch các kiểu nội tuyến thành chỉ những gì được sử dụng trong mẫu email cụ thể đó. Ví dụ: đối với premailer, tệp ruby của bạn có thể trông giống như thế này để biên dịch email thành kiểu nội tuyến.
require 'rubygems' # optional for Ruby 1.9 or above.
require 'premailer'
premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)
# Write the HTML output
File.open("delivery_report.html", "w") do |fout|
fout.puts premailer.to_inline_css
end
# Write the plain-text output
File.open("output.txt", "w") do |fout|
fout.puts premailer.to_plain_text
end
# Output any CSS warnings
premailer.warnings.each do |w|
puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
endHi vọng điêu nay co ich! Bạn đang đấu tranh để tìm ra một khuôn khổ tạo mẫu email linh hoạt trên Pardot, Salesforce cũng như các email hàng ngày và tự động trả lời tích hợp trong sản phẩm của chúng tôi.
Mẹo ở đây là bạn không muốn bao gồm toàn bộ bootstrap. Vấn đề là các ứng dụng email sẽ bỏ qua các truy vấn phương tiện và xử lý tất cả các kiểu in có rất nhiều câu lệnh quan trọng.
Thay vào đó, bạn chỉ cần bao gồm các phần cụ thể của bootstrap mà bạn cần. Tệp email.css.scss của tôi trông giống như sau:
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';Còn Bootstrap Email thì sao? Điều này có vẻ thực sự tốt và tương thích với bootstrap 4.