有没有人收到使用 Twitter Bootstrap 的 HTML 电子邮件？答案

【问题标题】：Has anyone gotten HTML emails working with Twitter Bootstrap?有没有人收到使用 Twitter Bootstrap 的 HTML 电子邮件？
【发布时间】：2012-04-01 17:16:06
【问题描述】：

我正在使用 premailer-rails3 gem，它为 html 电子邮件内联样式，我正在尝试让它与 Twitter 引导程序一起使用。

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

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

谢谢！

【问题讨论】：

电子邮件客户端很难为它设计样式。使用 bootstrap 中的所有复杂 CSS，我认为它不会起作用。你最好去掉你能做的，并使用表格和内联样式来获得你想要的样式，或者关闭。
我也有同样的问题。我想我最终要做的是制作电子邮件，截取 CSS 如何使它看起来没有文本的屏幕截图，然后在 HTML 中使用屏幕截图图像和文本。这是一个令人讨厌的解决方案，但它应该可以完成工作。
我必须在上面共同签名。电子邮件非常具体，（如果您不熟悉）尝试下载一些免费的电子邮件模板并调整代码。试试这些链接 freemailtemplates.com、www.campaignmonitor.com/css/ 和 www.sitepoint.com/code-html-email-newsletters/
-1 用于发送纯文本电子邮件以外的任何内容。
完全同意你，布赖恩。过去几天我一直在处理 HTML 电子邮件，这是不必要的，而且非常痛苦。我有兴趣为 HTML 电子邮件启动等效的 Bootstrap 样式；你有兴趣帮忙吗？

标签： html twitter-bootstrap html-email

【解决方案1】：

电子邮件需要表格才能正常工作。

Inky（由电子邮件基金会提供）是一种模板语言，可将简单的 HTML 标记转换为电子邮件所需的复杂表格 HTML。

示例

<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>Put content in me!</th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

会产生这个：

【讨论】：

【解决方案2】：

我很抱歉恢复了这个旧线程，但我只是想让大家知道有一个非常接近 Bootstrap 的 CSS 框架，专门为电子邮件样式创建，这里是链接：http://zurb.com/ink/

希望对某人有所帮助。

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

沉默但致命的编辑：新链接https://get.foundation/emails.html

【讨论】：

所有链接都断开了。

【解决方案3】：

如果您的意思是“我可以在电子邮件中使用 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 状态不能单独设置样式

那里有are loads of answers onSO，以及整个互联网上的许多其他链接。

【讨论】：

第一个链接失效了。

【解决方案4】：

Bootstrap Email? 怎么样？这似乎非常好，并且与 bootstrap 4 兼容。

【讨论】：

这是最好的方法之一

【解决方案5】：

你好布赖恩阿姆斯特朗，请访问this link。

本博客告诉您如何将 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" %>

【讨论】：

【解决方案6】：

这里的诀窍是您不想包含整个引导程序。问题是电子邮件客户端将忽略媒体查询并处理所有具有大量 !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';

【讨论】：

【解决方案7】：

我想出的最佳方法是在选定的基础上使用 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 的响应式表格样式发生冲突。为了解决这个问题，您可以将引导程序的样式嵌套在父类或其他选择器中，以便仅在需要时调用引导程序的表格样式。

这样，您可以灵活地仅在需要时引入课程。你会看到我使用了@987654321@，这是一个很好的响应式电子邮件库。另见@987654322@

最后，使用上面提到的 @987654323@ 之类的 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 以及我们产品的内置自动回复和每日电子邮件中找到灵活的电子邮件模板框架。

【讨论】：

【解决方案8】：

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

【讨论】：

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

【解决方案9】：

以下是一些你不能用电子邮件做的事情：

包含一个带有样式的部分。 Apple Mail.app 支持它，但 Gmail 和 Hotmail 不支持，所以这是一个禁忌。 Hotmail 将支持正文中的样式部分，但 Gmail 仍然没有。

链接到外部样式表。没有多少电子邮件客户端支持这一点，最好忘记它。

Background-image / Background-position。 Gmail 也是这个问题的罪魁祸首。

清除浮动。再次使用 Gmail。

保证金。是的，说真的，Hotmail 忽略了利润。基本上任何 CSS 定位都不起作用。

字体-任何东西。 Eudora 可能会忽略您尝试使用字体声明的任何内容。

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

Mailchimp 有您可以使用的电子邮件模板 - here

更多资源可以帮助您

【讨论】：

1.您可以排序使用样式 - 您不应该将其放在头部，但您可以将其包含在正文中。 2. 背景很好 - 使用背景 html 属性而不是 CSS。 Outlook 2007/2010 需要他们自己的 ('VML') 解决方案。 3.你根本不能使用浮动，更不用说清除它们了。 4. Font-anything - Eudora 是少数客户。显然，这取决于您的客户（查看分析），但font-size 以极低的成本为您提供更大的灵活性。

【解决方案10】：

我最近花了一些时间研究构建 html 电子邮件模板，我发现最好的解决方案是使用这个http://htmlemailboilerplate.com/。从那以后，我构建了 3 个相当复杂的模板，它们在各种电子邮件客户端中运行良好。

【讨论】：