我如何使用bootstrap用于电子邮件模板?

时间:2016-10-06 01:32:43

标签: twitter-bootstrap email

我正在尝试制作好的响应式电子邮件,并想知道我如何能够包含引导程序。我正在使用mac邮件应用程序。我没有很多第三方应用程序,但我想制作自己的模板。 到目前为止,我一直在附加html在电子邮件签名文件,但它没有一个头部分让我包括bootstrap。或者即使没有bootstrap在电子邮件中创建响应式网格的方法是什么?

我有这样的事情:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[REPLACE THIS WITH YOUR TITLE]</title>
        <style media="all" type="text/css">
        [READ THE MINIFIED CSS FILE IN SEPARATELY AND INSERT IT HERE. YOU *CANNOT* JUST USE A CSS REFERENCE.]
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td class="navbar navbar-inverse" align="center">
                <!-- This setup makes the nav background stretch the whole width of the screen. -->
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr class="navbar navbar-inverse">
                        <td colspan="4"><a class="brand" href="[YOUR WEB URL]">Bootstrap For Email</a></td>
                        <td><ul class="nav pull-right"><li><a href="[YOUR LOGIN URL]">Log On</a></li></ul></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" align="center">
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr>
                        <td>[BODY CONTENT GOES HERE]</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF" align="center">
                <table width="650px" cellspacing="0" cellpadding="3" class="container">
                    <tr>
                        <td>
                            <hr>
                            <p>[PUT YOUR COPYRIGHT OR OTHER FOOTERY GOODNESS HERE]</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

2 个答案:

答案 0 :(得分:-1)

创建电子邮件模板与Web模板不同。 如果您想自己创建电子邮件模板,则必须使用内部和内联样式,而不是外部css包含不起作用。 但是,您可以使用外部链接图像作为模板。 互联网上有许多可用于创建响应式电子邮件模板的源。 找到下面的链接。你可能会对

有所了解

https://litmus.com/community/learning/24-how-to-code-a-responsive-email-from-scratch https://www.copernica.com/en/documentation/how-to-create-a-responsive-html-email-from-scratch

答案 1 :(得分:-2)

根据我的经验,如果您在电子邮件模板中包含css文件可能无效,则应直接在电子邮件模板中创建css代码。 像这样:

<div style="color:#FFFFF">...