有没有人使用Twitter Bootstrap获取HTML电子邮件？

Question

我正在使用premailer-rails3为html电子邮件提取内联样式的gem,我正在尝试使用Twitter bootstrap.

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

看起来有些样式正确,但不是全部.我想知道是否有人有一个很好的工作示例,将他们的Twitter Bootstrap css(已修改或未修改)转换为HTML电子邮件.

谢谢!

Answer 1

如果你的意思是"我可以在电子邮件中使用Bootstrap的风格演示吗？" 那么你可以,虽然我不知道有谁做过.你需要在表格中重新编码所有内容.

如果您使用的是功能,则取决于您查看电子邮件的位置.如果您的很大一部分用户使用的是Outlook,Gmail,Yahoo或Hotmail(这些用户通常会占到大约75%的电子邮件客户端),那么很多Bootstrap的优点都是不可能实现的.Android上的Mac Mail,iOS Mail和Gmail在渲染CSS方面要好得多,所以如果你主要针对的是移动设备,那就不是那么糟糕了.

• JavaScript - 完全不受限制.如果你尝试,你可能会直接发送电子邮件地址(又名垃圾邮件文件夹).这意味着LESS也是超出界限的,尽管如果你愿意,你可以明显地使用生成的CSS样式.
• 内联CSS使用比任何其他类型的CSS更安全(嵌入是可能的,链接是肯定的否).媒体查询是可能的,因此您可以进行某种响应式设计.但是,有一长串CSS属性不起作用 - 实质上,电子邮件客户端在很大程度上不支持盒子模型.您需要使用表格构建所有内容.
• font-face - 您只能使用外部图像.排除所有其他外部资源(CSS文件,字体).
• 字形和精灵 - 由于Outlook 2007的背景图像(VML)奇怪的实现,你不能使用背景重复或位置.
• 伪选择器是不可能的 - 例如:hover,:active状态不能单独设置样式

这里是 负载 的 答案 在 SO,和许多大型在互联网上的其他环节.

• http://www.emailology.org/
• http://www.email-standards.org/
• http://htmlemailboilerplate.com/
• http://www.campaignmonitor.com/css/

Answer 2

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

希望它可以帮助某人.

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

Answer 3

以下是您无法处理电子邮件的一些事项:

• 包括带样式的部分.Apple 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样式
• 为Gmail设置HTML电子邮件样式

Answer 4

您可以使用此https://github.com/advancedrei/BootstrapForEmail来捆绑您的电子邮件.