有人收到过与Twitter Bootstrap兼容的HTML电子邮件吗？

91

我正在使用premailer-rails3可以为html电子邮件内联样式的gem，并且我正在尝试使其与Twitter引导程序一起使用。

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

看起来有些样式可以正确输入，但不是全部。我想知道是否有人将Twitter Bootstrap CSS（修改或未修改）放入html电子邮件中，这是一个很好的工作示例。

谢谢！

html twitter-bootstrap html-email

— 布赖恩·阿姆斯特朗
source

16

电子邮件客户端很难样式化。对于所有来自引导程序的复杂CSS，我都不认为它会起作用。最好剥离所有内容，并使用表格和内联样式获取所需的样式或关闭样式。

— 安德烈斯·伊里奇

我有同样的问题。我认为我最终要做的是制作电子邮件，截取CSS使其不显示文本的屏幕截图，然后在HTML中使用截屏图像和文本。这是一个令人讨厌的解决方案，但它应该完成工作。

— gsingh2011'4

2

我必须共同签署以上内容。电子邮件确实是特定的（如果您不熟悉），请尝试下载一些免费的电子邮件模板并调整代码。尝试这些链接freemailtemplates.com，www.campaignmonitor.com/css/＆www.sitepoint.com/code-html-email-newsletters/

— frontsideup

2

-1用于发送除纯文本电子邮件以外的任何内容。

— 科迪·格雷

2

完全同意你，布莱恩。最近几天，我一直在处理HTML电子邮件，这是不必要的，而且非常痛苦。我对启动与HTML电子邮件等效的Bootstrap样式感兴趣；您想帮忙吗？

— NoizWaves 2012年

83

如果您的意思是“我可以在电子邮件中使用Bootstrap的样式表示吗？” 那么您可以，尽管我还不知道有人这样做。您将需要重新编码表中的所有内容。

如果您追求功能，则取决于查看电子邮件的位置。如果您的用户中有很大一部分使用Outlook，Gmail，Yahoo或Hotmail（并且这些用户通常占电子邮件客户端的大约75％），那么很多Bootstrap的好处就不可能实现。Mac Mail，iOS Mail和Android上的Gmail在呈现CSS方面要好得多，因此，如果您主要针对移动设备，那还不错。

JavaScript-完全不受限制。如果尝试尝试，您可能会直接发送电子邮件到地狱（又名垃圾邮件文件夹）。这意味着LESS也超出了范围，尽管您可以根据需要显然使用生成的CSS样式。
内联CSS比其他任何类型的CSS都更安全使用（可以嵌入，链接绝对不是）。可以进行媒体查询，因此您可以进行某种响应式设计。但是，有一堆无法使用的CSS属性-基本上，电子邮件客户端不支持Box模型。您需要使用表来构造所有内容。
font-face-您只能使用外部图像。排除所有其他外部资源（CSS文件，字体）。
字形和精灵-由于Outlook 2007奇怪地实现了背景图像（VML），因此您不能使用背景重复或位置。
伪选择器是不可能的-例如:hover，:active状态不能单独设置样式

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

— 丹·布鲁斯
source

1

第一个链接已死。

— 霍曼

45

我为重新使用此旧线程表示歉意，但我只是想让所有人都知道，有一个非常紧密的Bootstrap之类的CSS框架是专门为电子邮件样式创建的，下面是链接：http: //zurb.com/ink/

希望它能帮助某人。

忍者编辑：此后已重命名为Foundation for Emails，新链接为：https : //foundation.zurb.com/emails.html

— 亚当
source

1

所有链接断开。

— 霍曼

16

以下是您无法通过电子邮件进行的一些操作：

包括一个带有样式的部分。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有您可以使用的电子邮件模板- 在这里

其他一些资源应该对您有帮助

— 猫王杜萨
source

1.您可以使用某种样式-不应将其放在头部，而可以将其包含在体内。2.背景很好-使用background html属性而不是CSS。Outlook 2007/2010需要自己的（'VML'）解决方案。3.根本不能使用浮点数，更不用说清除它们了。4.任何字体-Eudora是少数客户。显然，这取决于您的客户（请看分析），但是却font-size以很少的成本为您提供了更大的灵活性。

— 丹·布拉斯

10

您可以使用此https://github.com/advancedrei/BootstrapForEmail来b打包电子邮件。

— 助威者
source

2

感谢您的链接。我到处都在寻找这样的东西！遗憾的是，它是在Bootstrap 2.x上开发的，不再生产。

— oldo.nicho

2

最近，我花了一些时间研究构建html电子邮件模板，发现的最佳解决方案是使用此http://htmlemailboilerplate.com/。从那以后，我已经构建了3个非常复杂的模板，它们在各种电子邮件客户端中都能很好地工作。

— 马蒂·哈里斯
source

1

嗨，Brian Armstrong，访问此链接。

该博客告诉您如何将Rails与Bootstrap集成（使用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" %>

— 杨树瑞
source

0

我想出的最好方法是在选定的基础上使用Sass导入，以根据需要将引导程序（或任何其他）样式引入电子邮件中。

首先，创建一个新的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的响应表样式冲突。要解决此问题，可以将引导程序的样式嵌套在父类或其他选择器中，以便仅在需要时才调用引导程序的表样式。

这样，您可以灵活地仅在需要时才引入类。您会看到我使用的http://zurb.com/是一个很棒的响应式电子邮件库。也可以看看http://zurb.com/ink/

最后，使用上述的premailer https://github.com/fphilipe/premailer-rails3将样式处理为内联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以及我们产品的内置自动响应和每日电子邮件中找到一个灵活的电子邮件模板框架。

— 瑞安·沃尔顿（Ryan Walton）
source

0

这里的窍门是您不想包括整个引导程序。问题在于，电子邮件客户端将忽略媒体查询，并处理所有包含大量！important语句的打印样式。

相反，您只需要包含所需的引导程序的特定部分。我的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';

— gabeodess
source

0

那么Bootstrap电子邮件呢？这似乎真的很好，并且与bootstrap 4兼容。

— 林加
source