有没有人得到与Twitter Bootstrap工作的HTML电子邮件?

我正在使用premailer-rails3 gem,它为html电子邮件内联样式,我试图用Twitter引导来处理它。

https://github.com/fphilipe/premailer-rails3

它看起来像一些样式正确,但不是全部。 我想知道如果任何人有一个很好的工作的例子,让他们的Twitter Bootstrap的CSS(修改或不)成为一个HTML电子邮件。

谢谢!

如果您的意思是“我可以在电子邮件中使用Bootstrap的文体演示吗?” 那么你可以,虽然我还不知道有谁做过。 你需要重新编码表中的所有内容。

如果你在function上,这取决于你的电子邮件被查看的地方。 如果你的用户中有很大一部分用户在Outlook,Gmail,Yahoo或Hotmail上(而且这些用户通常占到电子邮件客户端的75%左右),那么很多Bootstrap的优点是不可能的。 Android上的Mac Mail,iOS Mail和Gmail在渲染CSS方面要好得多,所以如果你的目标主要是移动设备,那就不是那么糟糕了。

  • JavaScript – 完全没有限制。 如果你尝试,你可能会直接去电子邮件地狱(又名垃圾邮件文件夹)。 这意味着LESS也是越界的,尽pipe如果你愿意的话,你显然可以使用结果的CSS样式。
  • 内联CSS比任何其他types的CSS更安全(embedded是可能的,链接是一个确定的否)。 媒体查询是可能的,所以你可以有一些响应式devise。 但是,有一长串CSS属性不起作用 – 实质上,电子邮件客户端基本上不支持框模型。 你需要用表格来构造一切。
  • font-face – 你只能使用外部图像。 所有其他外部资源(CSS文件,字体)都被排除在外。
  • 字形和精灵 – 由于Outlook 2007的奇怪的背景图像(VML)的实现,你不能使用背景重复或位置。
  • 伪select器是不可能的 – 例如:hover:active状态不能单独设置样式

SO 上 有 大量 的 答案 ,还有大量的互联网上的其他链接。

我很抱歉为这个旧的线程,但我只是想让每个人都知道有一个非常接近的CSS框架专门为电子邮件样式创build的Bootstrap,这里是链接:http: //zurb.com/ink/

希望它可以帮助别人。

忍者编辑:它已被重命名Foundation for Emails和新的链接是: https : //foundation.zurb.com/emails.html

这里有一些你不能用电子邮件做的事情:

  • 包含样式的部分 。 苹果Mail.app支持,但Gmail和Hotmail不支持,所以这是一个禁忌。 Hotmail将支持正文中的样式部分,但Gmail仍然不支持。
  • 链接到外部样式表。 没有太多的电子邮件客户端支持这一点,最好只是忘记它。
  • 背景图像/背景位置。 Gmail也是这一个的罪魁祸首。
  • 清理你的花车 。 Gmail再次。
  • 保证金 。 是的,严重的是,Hotmail忽略了利润。 基本上任何CSS定位都不起作用。
  • 字体 – 任何东西 。 Eudora可能会忽略任何你试图用字体声明的东西。

资料来源: http : //css-tricks.com/using-css-in-html-emails-the-real-story/

Mailchimp有电子邮件模板,你可以使用 – 在这里

还有几个资源可以帮助你

  • HTML电子邮件样式的最佳实践
  • 在电子邮件中造型html
  • 为GmaildeviseHTML电子邮件

我最近花了一些时间研究构buildHTML电子邮件模板,我发现最好的解决scheme是使用这个http://htmlemailboilerplate.com/ 。 我已经build立了3个相当复杂的模板,并且在各种电子邮件客户端运行良好。

嗨,Brian Armstrong,请访问此链接

这个博客告诉你如何整合RailsBootstrap less(使用premailer-rails)。

如果你使用bootstrap sass,你可以这样做:

首先将一些Bootstrap sass文件导入到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'; 

然后在你的视图<head>部分添加<%= stylesheet_link_tag "email" %>

我提出的最好的方法是使用选定的Sass导入,将引导程序(或任何其他)的样式引入可能需要的电子邮件中。

首先,为您的电子邮件样式创build一个新的scss父文件,如email.scss 。 这可能是这样的:

  // 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"; 

然后在您的电子邮件模板中,只引用编译的email.css文件,该文件只包含选定的引导程序样式,并在您的email.scss中正确嵌套。

例如,某些引导样式将与Zurb的响应式表格样式相冲突。 为了解决这个问题,你可以将引导程序的样式嵌套在父类或其他select器中,以便仅在需要时调用引导程序的表样式。

这样,您只有在需要时才能灵活地进入课程。 你会看到我使用http://zurb.com/这是一个很好的响应电子邮件库使用。 另见http://zurb.com/ink/

最后,使用上面提到的https://github.com/fphilipe/premailer-rails3这样的premailer将样式处理为内联css,将内联样式编译为仅用于该特定电子邮件模板的样式。 例如,对于premailer,你的ruby文件可能看起来像这样编译一个电子邮件成内联风格。

  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]}" end 

希望这可以帮助! 一直在努力在Pardot,Salesforce和我们产品的内置自动回复和每日电子邮件中find灵活的电子邮件模板框架。

这里的诀窍是,你不想包括整个引导。 问题是,电子邮件客户端将忽略媒体查询,并处理所有具有很多重要语句的打印样式。

相反,你只需要包含你需要的bootstrap的特定部分。 我的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';