blocks|key|406440|text|你可以使用这个https://github.com/advancedrei/BootstrapForEmail来给你的电子邮件加b-strapping。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|406441|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/advancedrei/BootstrapForEmail^0|7|1C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can use this <a href="https://github.com/advancedrei/BootstrapForEmail" rel="noreferrer">https://github.com/advancedrei/BootstrapForEmail</a> for b-strapping your email.</p>


blocks|key|622276|text|那么Bootstrap+Email?呢?它看起来真的很不错，并且与bootstrap+4兼容。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|622277|entityMap|0|LINK|mutability|MUTABLE|url|https://bootstrapemail.com/^0|2|G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>What about <a href="https://bootstrapemail.com/" rel="nofollow noreferrer">Bootstrap Email?</a> This seems to really nice and compatible with bootstrap 4. </p>


blocks|key|621958|text|我最近花了一些时间研究构建html电子邮件模板，我发现最好的解决方案是使用这个http://htmlemailboilerplate.com/。我已经构建了3个相当复杂的模板，它们在各种电子邮件客户端中都工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|621959|entityMap|0|LINK|mutability|MUTABLE|url|http://htmlemailboilerplate.com/^0|13|W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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


blocks|key|622143|text|我想出的最好的方法是在选定的基础上使用Sass导入，根据需要将您的引导程序(或任何其他)样式引入电子邮件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|622144|首先，为您的电子邮件样式创建一个新的scss父文件，类似于email.scss。这可能如下所示：|offset|length|style|CODE|622145|++++//+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";|code-block|syntax|javascript|622146|然后，在您的电子邮件模板中，仅引用已编译的email.css文件，该文件仅包含在email.scss中正确引用和嵌套的选定引导程序样式。|622147|例如，某些引导样式将与Zurb的响应表样式冲突。要解决这个问题，您可以在父类或其他选择器中嵌套bootstrap的样式，以便仅在需要时调用bootstrap的表样式。|622148|这样，您就可以灵活地仅在需要时引入类。您将看到我使用的是http://zurb.com/，它是一个非常好用的响应式电子邮件库。另请参阅http://zurb.com/ink/|622149|最后，使用像上面提到的https://github.com/fphilipe/premailer-rails3这样的premailer将样式处理成内联css，只将内联样式编译为特定电子邮件模板中使用的样式。例如，对于premailer，你的ruby文件可以像这样编译成内联样式的电子邮件。|622150|++++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+%7Cfout%7C
++++++fout.puts+premailer.to_inline_css
++++end

++++#+Write+the+plain-text+output
++++File.open("output.txt",+"w")+do+%7Cfout%7C
++++++fout.puts+premailer.to_plain_text
++++end

++++#+Output+any+CSS+warnings
++++premailer.warnings.each+do+%7Cw%7C
++++++puts+"#{w[:message]}+(#{w[:level]})+may+not+render+properly+in+#{w[:clients]}"
++++end|622151|希望这能有所帮助！我一直在努力寻找一个跨Pardot、Salesforce和我们产品的内置自动响应和日常电子邮件的灵活电子邮件模板框架。|622152|entityMap|0|LINK|mutability|MUTABLE|url|http://zurb.com/|1|http://zurb.com/ink/|2|https://github.com/fphilipe/premailer-rails3^0|0|T|A|0|0|0|0|S|G|1V|K|S|G|0|1V|K|1|0|B|18|B|18|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]]|9|@$D|1M|E|1N|1|1O]|$D|1P|E|1Q|1|1R]]|A|$]]|$1|S|3|T|5|6|7|1S|8|@$D|1T|E|1U|F|G]]|9|@$D|1V|E|1W|1|1X]]|A|$]]|$1|U|3|V|5|J|7|1Y|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]|18|$5|11|12|13|A|$14|19]]]]

<p>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. </p>

<p>First, create a new scss parent file something like <code>email.scss</code> for your email style. This could look like this: </p>

<pre><code>    // 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";
</code></pre>

<p>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.</p>

<p>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.</p>

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

<p>Lastly, use a premailer like <code><a href="https://github.com/fphilipe/premailer-rails3" rel="nofollow">https://github.com/fphilipe/premailer-rails3</a></code> mentioned 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.</p>

<pre><code>    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 =&gt; 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
</code></pre>

<p>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. </p>


blocks|key|622227|text|这里的诀窍是您不想包含整个引导程序。问题是，电子邮件客户端将忽略媒体查询，并处理所有打印样式，其中包含许多！重要声明。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|622228|相反，您只需要包含所需的bootstrap的特定部分。我的email.css.scss文件如下所示：|622229|@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';|code-block|syntax|javascript|622230|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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.</p>

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

<pre><code>@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';
</code></pre>


blocks|key|406797|text|电子邮件需要表格才能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|406798|Inky+(电子邮件的基础)是一种模板语言，它将简单的HTML标记转换为电子邮件所需的复杂表格HTML。|offset|length|406799|示例|406800|<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>|code-block|syntax|javascript|406801|将产生这样的结果：|406802|​|406803|📷|atomic|406804|406805|entityMap|0|LINK|mutability|MUTABLE|url|https://get.foundation/emails/docs/inky.html|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/803e409c4e99e5ed6969b3598b17e283.png|imageAlt^0|0|0|4|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1H|8|@]|9|@$D|1I|E|1J|1|1K]]|A|$]]|$1|T|3|P|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|13|Y|14|A|$15|16|17|-4]]]]

<p>Emails require tables in order to work properly.</p>
<p><a href="https://get.foundation/emails/docs/inky.html" rel="nofollow noreferrer">Inky</a> (by foundation for emails) is a templating language that converts simple HTML tags into the complex table HTML required for emails.</p>
<h3>Example</h3>
<pre class="lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;&lt;/head&gt;

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

&lt;/html&gt;
</code></pre>
<p>Will produce this:</p>
<p><a href="https://i.stack.imgur.com/RACKU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RACKU.png" alt="enter image description here" /></a></p>


<p>I'm using the <code>premailer-rails3</code> gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.</p>

<p><a href="https://github.com/fphilipe/premailer-rails3">https://github.com/fphilipe/premailer-rails3</a></p>

<p>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.</p>

<p>Thanks!</p>


Has anyone gotten HTML emails working with Twitter Bootstrap?

我使用的是Twitter gem，它可以将样式内联到premailer-rails3电子邮件中，并且我正在尝试让它与Twitter bootstrap一起工作。看起来有些风格是正确的，但并不是所有的。我想知道是否有人有一个很好的工作示例，让他们的Twitter Bootstrap css (修改或未修改)到html电子邮件中。谢谢!

问有没有人在Twitter Bootstrap上收到HTML电子邮件？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有人在Twitter Bootstrap上收到HTML电子邮件？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有人在Twitter Bootstrap上收到HTML电子邮件？
EN