Question

我正在使用premailer-rails3 gem为html电子邮件提取内联样式，我正在尝试使用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 - 完全不受限制。如果你尝试，你可能会直接发送电子邮件地狱（a.k.a。垃圾邮件文件夹）。这意味着LESS也超出界限，但如果你愿意，你可以明显地使用生成的CSS样式。
内联CSS使用比任何其他类型的CSS更安全（嵌入是可能的，链接是肯定的否）。媒体查询是可能的，因此您可以进行某种响应式设计。但是，有一长串CSS属性不起作用 - 实质上，电子邮件客户端在很大程度上不支持盒子模型。你需要用表格来构建所有东西。
font-face - 您只能使用外部图片。排除所有其他外部资源（CSS文件，字体）。
字形和精灵 - 由于Outlook 2007奇怪的背景图像（VML）实现，您无法使用背景重复或位置。
伪选择器是不可能的 - 例如:hover，:active州无法单独设置样式

are loads of answers on SO，以及互联网上的许多其他链接。

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包含您可以使用的电子邮件模板 - here

可以帮助您的更多资源

Answer 4

您可以使用此https://github.com/advancedrei/BootstrapForEmail b-strapping您的电子邮件。

Answer 5

我最近花了一些时间研究构建HTML电子邮件模板，我找到的最佳解决方案是使用此http://htmlemailboilerplate.com/。我已经构建了3个非常复杂的模板，并且它们在各种电子邮件客户端中运行良好。

Answer 6

嗨Brian Armstrong，访问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" %>

Answer 7

我提出的最佳方法是在选定的基础上使用Sass导入将您的引导程序（或任何其他）样式引入到可能需要的电子邮件中。

首先，为您的电子邮件样式创建一个类似email.scss的新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的响应表样式冲突。要解决这个问题，您可以在父类或其他选择器中嵌套bootstrap的样式，以便仅在需要时调用bootstrap的表样式。

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

最后，使用上面提到的https://github.com/fphilipe/premailer-rails3之类的预编码器将样式处理为内联css，将内联样式编译为仅在该特定电子邮件模板中使用的样式。例如，对于预编译器，您的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以及我们产品的内置自动回复和每日电子邮件中找到灵活的电子邮件模板框架。

Answer 8

这里的诀窍是你不想包含整个引导程序。问题是电子邮件客户端会忽略媒体查询并处理所有具有大量重要声明的打印样式。

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

Answer 9

Bootstrap Email?呢，这似乎很好，并且与bootstrap 4兼容。

Answer 10

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

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>

将产生这个：

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

10 个答案:

示例