有没有人得到与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，请访问此链接 。
这个博客告诉你如何整合Rails和Bootstrap 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';
