有没有人收到过使用 Twitter Bootstrap 的 HTML 电子邮件? [英] Has anyone gotten HTML emails working with Twitter Bootstrap?
问题描述
我正在使用 premailer-rails3 gem，它可以为 html 电子邮件内嵌样式，并且我正在尝试让它与 Twitter 引导程序一起使用.
I'm using the premailer-rails3 gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
看起来有些样式是正确的，但不是全部.我想知道是否有人有一个很好的工作示例，可以将他们的 Twitter Bootstrap css(已修改或未修改)放入 html 电子邮件中.
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.
谢谢！
推荐答案
如果您的意思是我可以在电子邮件中使用 Bootstrap 的风格展示吗?"那你就可以了，虽然我不知道有谁做过.不过，您需要重新编码表格中的所有内容.
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.
如果您追求功能，则取决于查看电子邮件的位置.如果您的用户中有很大一部分使用 Outlook、Gmail、Yahoo 或 Hotmail(这些通常加起来占电子邮件客户端的 75% 左右)，那么 Bootstrap 的很多优点是不可能的.Android 上的 Mac 邮件、iOS 邮件和 Gmail 在呈现 CSS 方面要好得多，因此如果您主要针对移动设备，那还不错.
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.
- JavaScript - 完全不受限制.如果您尝试，您可能会直接进入电子邮件地狱(又名垃圾邮件文件夹).这意味着 LESS 也是越界的，尽管您显然可以根据需要使用生成的 CSS 样式.
- 内联 CSS 比任何其他类型的 CSS 使用起来更安全(嵌入是可能的，链接是明确的否).媒体查询是可能的，因此您可以进行某种响应式设计.但是，有一长串 CSS 属性不起作用——本质上，电子邮件客户端基本上不支持框模型.您需要使用表格来构建所有内容.
font-face- 您只能使用外部图像.排除所有其他外部资源(CSS 文件、字体).- 字形和精灵 - 由于 Outlook 2007 奇怪的背景图像 (VML) 实现，您不能使用背景重复或位置.
- 伪选择器是不可能的 - 例如
:hover,:active状态不能单独设置样式
- 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
There are loads of answers on SO, and lots of other links on the internet at large.
这篇关于有没有人收到过使用 Twitter Bootstrap 的 HTML 电子邮件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
