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

Has anyone gotten HTML emails working with Twitter Bootstrap?

提问by Brian Armstrong

I'm using the premailer-rails3gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.

我正在使用premailer-rails3gem 来为 html 电子邮件内嵌样式，我正在尝试让它与 Twitter 引导程序一起工作。

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

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

It looks like some styles come in correctly, but not all of them. I'm wondering if anyone has a nice working example of getting their Twitter Bootstrap css (modified or not) into an html email.

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

Thanks!

谢谢！

采纳答案by Dan Blows

If you mean "Can I use the stylistic presentation of Bootstrap in an email?" then you can, though I don't know anybody that has done it yet. You'll need to recode everything in tables though.

如果您的意思是“我可以在电子邮件中使用 Bootstrap 的风格展示吗？” 那你就可以了，虽然我不知道有谁做过。不过，您需要重新编码表格中的所有内容。

If you are after functionality, it depends on where your emails are viewed. If a significant proportion of your users are on Outlook, Gmail, Yahoo or Hotmail (and these typically add up to around 75% of email clients) then a lot of Bootstrap's goodness is not possible. Mac Mail, iOS Mail and Gmail on Android are much better at rendering CSS, so if you are targeting mostly mobile devices it's not quite so bad.

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

• JavaScript - completely off limits. If you try, you'll probably go straight to email hell (a.k.a. spam folder). This means that LESS is also out of bounds, although you can obviously use the resulting CSS styles if you want to.
• Inline CSS is much safer to use than any other type of CSS (embedded is possible, linked is a definite no). Media queries are possible, so you can have some kind of responsive design. However, there is a long list of CSS attributes that don't work - essentially, the box model is largely unsupported in email clients. You need to structure everything with tables.
• font-face- you can only use external images. All other external resources (CSS files, fonts) are excluded.
• glyphs and sprites - because of Outlook 2007's weird implementation of background-images (VML), you cant use background-repeat or position.
• pseudo-selectors are not possible - e.g. :hover, :activestates cannot be styled separately

• JavaScript - 完全不受限制。如果您尝试，您可能会直接进入电子邮件地狱（又名垃圾邮件文件夹）。这意味着 LESS 也是越界的，尽管您显然可以根据需要使用生成的 CSS 样式。
• 内联 CSS 比任何其他类型的 CSS 使用起来更安全（嵌入是可能的，链接是明确的否）。媒体查询是可能的，因此您可以进行某种响应式设计。但是，有一长串 CSS 属性不起作用 - 本质上，电子邮件客户端基本上不支持框模型。你需要用表格来组织一切。
• font-face- 您只能使用外部图像。排除所有其他外部资源（CSS 文件、字体）。
• 字形和精灵 - 由于 Outlook 2007 对背景图像 (VML) 的奇怪实现，您不能使用背景重复或位置。
• 伪选择器是不可能的——例如:hover，:active状态不能单独设置样式

There areloadsofanswersonSO, and lots of other links on the internet at large.

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

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

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

回答by adamj

I apologize for resurecting this old thread, but I just wanted to let everyone know there is a very close Bootstrap like CSS framework specifically created for email styling, here is the link: http://zurb.com/ink/

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

Hope it helps someone.

希望它可以帮助某人。

Ninja edit:It has since been renamed to Foundation for Emailsand the new link is: https://foundation.zurb.com/emails.html

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

回答by Elvis D'Souza

Here are a few things you cant do with email:

以下是您无法使用电子邮件做的一些事情：

• Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
• Link to an external stylesheet.Not many email clients support this, best to just forget it.
• Background-image / Background-position.Gmail is also the culprit on this one.
• Clear your floats. Gmail again.
• Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
• Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

• 包括一个带有样式的部分。Apple Mail.app 支持它，但 Gmail 和 Hotmail 不支持，所以这是一个禁忌。Hotmail 将支持正文中的样式部分，但 Gmail 仍然不支持。
• 链接到外部样式表。没有多少电子邮件客户端支持这一点，最好忘记它。
• 背景图像/背景位置。Gmail 也是这一问题的罪魁祸首。
• 清除你的浮动。再次使用 Gmail。
• 保证金。是的，说真的，Hotmail 忽略了边距。基本上任何 CSS 定位都不起作用。
• 字体 - 任何东西。Eudora 可能会忽略您尝试使用字体声明的任何内容。

Source: http://css-tricks.com/using-css-in-html-emails-the-real-story/

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

Mailchimp has email templates you can use - here

Mailchimp 有您可以使用的电子邮件模板 -在这里

A few more resources that should help you

还有一些应该可以帮助您的资源

• Best practices for styling HTML emails
• Styling html in email
• Styling HTML email for Gmail

• 样式化 HTML 电子邮件的最佳实践
• 电子邮件中的 html 样式
• Gmail 的 HTML 电子邮件样式

回答by Viktorminator

You can use this https://github.com/advancedrei/BootstrapForEmailfor b-strapping your email.

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

回答by MattyHarris

I spent some time recently looking into building html email templates, the best solution I found was to use this http://htmlemailboilerplate.com/. I have since built 3 quite complex templates and they have worked well in the various email clients.

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

回答by Shurui Yang

Hi Brian Armstrong， visit this link.

嗨，布赖恩·阿姆斯特朗，请访问此链接。

This blog tells you how to integrate Railswith Bootstrapless (using premailer-rails).

这个博客告诉你如何将Rails与Bootstrapless集成（使用 premailer-rails）。

If you're using bootstrap sass, you could do the same:

如果你使用 bootstrap sass，你可以这样做：

start by importing some Bootstrap sass files into email.css.scss

首先将一些 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';

and then in your view <head>section add <%= stylesheet_link_tag "email" %>

然后在您的视图<head>部分添加 <%= stylesheet_link_tag "email" %>

回答by Lingasamy Sakthivel

What about Bootstrap Email?This seems to really nice and compatible with bootstrap 4.

怎么样引导电子邮件？这似乎非常好，并且与 bootstrap 4 兼容。

回答by Ryan Walton

The best approach I've come up with is to use Sass imports on a selected basis to pull in your bootstrap (or any other) styles into emails as might be needed.

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

First, create a new scss parent file something like email.scssfor your email style. This could look like this:

首先，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";

Then in your email templates, only reference your compiled email.css file, which only contains the selected bootstrap styles referenced and nested properly in your email.scss.

然后在您的电子邮件模板中，仅引用您编译的 email.css 文件，该文件仅包含在您的 email.scss 中正确引用和嵌套的选定引导程序样式。

For example, certain bootstrap styles will conflict with Zurb's responsive table style. To fix that, you can nest bootstrap's styles within a parent class or other selector in order to call bootstrap's table styles only when needed.

例如，某些引导样式会与 Zurb 的响应式表格样式发生冲突。为了解决这个问题，您可以将引导程序的样式嵌套在父类或其他选择器中，以便仅在需要时调用引导程序的表格样式。

This way, you have the flexibility to pull in classes only when needed. You'll see that I use http://zurb.com/which is a great responsive email library to use. See also http://zurb.com/ink/

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

Lastly, use a premailer like https://github.com/fphilipe/premailer-rails3mentioned above to process the style into inline css, compiling inline styles to only what is used in that particular email template. For instance, for premailer, your ruby file could look something like this to compile an email into inline style.

最后，使用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

Hope this helps! Been struggling to find a flexible email templating framework across Pardot, Salesforce, and our product's built-in auto-response and daily emails.

希望这可以帮助！一直在努力在 Pardot、Salesforce 和我们产品的内置自动回复和日常电子邮件中找到灵活的电子邮件模板框架。

回答by gabeodess

The trick here is that you don't want to include the whole bootstrap. The issue is that email clients will ignore the media queries and process all the print styles which have a lot of !important statements.

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

Instead, you need to only include the specific parts of bootstrap that you need. My email.css.scss file looks like this:

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