¿Alguien ha recibido correos electrónicos HTML trabajando con Twitter Bootstrap?

Estoy usando la gema premailer-rails3 que extrae los estilos en línea para los correos electrónicos html, y estoy tratando de que funcione con Twitter bootstrap.

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

Parece que algunos estilos vienen correctamente, pero no todos. Me pregunto si alguien tiene un buen ejemplo de trabajo de conseguir su Twitter Bootstrap css (modificado o no) en un correo electrónico html.

Gracias!

Author: Brian Armstrong, 2012-03-16
Source

8 answers

Si quiere decir "¿Puedo usar la presentación estilística de Bootstrap en un correo electrónico?"entonces puedes, aunque no conozco a nadie que lo haya hecho todavía. Sin embargo, tendrás que recodificar todo en tablas.

Si buscas funcionalidad, depende de dónde se vean tus correos electrónicos. Si una proporción significativa de sus usuarios están en Outlook, Gmail, Yahoo o Hotmail (y estos generalmente suman alrededor del 75% de los clientes de correo electrónico), entonces una gran cantidad de bondad de Bootstrap no es posible. Mac Mail, iOS Mail y Gmail en Android son mucho mejores en la representación de CSS, por lo que si se dirige principalmente a dispositivos móviles no es tan malo.

  • JavaScript - completamente fuera de los límites. Si lo intentas, probablemente irás directamente al infierno del correo electrónico (también conocido como carpeta de spam). Esto significa que LESS también está fuera de los límites, aunque obviamente puede usar los estilos CSS resultantes si lo desea.
  • CSS en línea es mucho más seguro de usar que cualquier otro tipo de CSS (incrustado es posible, vinculado es un no definitivo). Medio las consultas son posibles, por lo que puede tener algún tipo de diseño responsivo. Sin embargo, hay una larga lista de atributos CSS que no funcionan; esencialmente, el modelo de caja no es compatible en gran medida con los clientes de correo electrónico. Necesitas estructurar todo con tablas.
  • font-face - solo se pueden usar imágenes externas. Todos los demás recursos externos (archivos CSS, fuentes) están excluidos.
  • glifos y sprites: debido a la extraña implementación de imágenes de fondo (VML) de Outlook 2007, no puede usar fondo-repetir o posición.
  • los pseudo-selectores no son posibles-p.ej. :hover, :active los estados no pueden ser estilizados por separado

Hay se cargas de respuestas en por LO tanto, y un montón de otros enlaces en el internet en grande.

 72
Author: Dan Blows,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:32:17

Me disculpo por volver a corregir este viejo hilo, pero solo quería que todos supieran que hay un Bootstrap muy cercano como CSS framework creado específicamente para el estilo de correo electrónico, aquí está el enlace: http://zurb.com/ink /

Espero que ayude a alguien.

Ninja edit: Desde entonces ha sido renombrado a Foundation for Emails y el nuevo enlace es: https://foundation.zurb.com/emails.html

 36
Author: adamj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-02 04:18:24

Aquí hay algunas cosas que no puedes hacer con el correo electrónico:

  • Incluye una sección con estilos. Apple Mail.la aplicación lo admite, pero Gmail y Hotmail no lo hacen, por lo que es un no-no. Hotmail apoyo una sección de estilo en el cuerpo, pero Gmail todavía no.
  • Enlace a una hoja de estilos externa. No muchos clientes de correo electrónico soportan esto, mejor olvidarlo.
  • Background-image / Background-position. Gmail también es el culpable de esto una.
  • Despejen sus carrozas . Gmail de nuevo.
  • Margen. Sí, en serio, Hotmail ignora los márgenes. Básicamente cualquier posicionamiento CSS en absoluto no funciona.
  • Font-anything . Es probable que Eudora ignore cualquier cosa que intente declarar con fuentes.

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

Mailchimp tiene plantillas de correo electrónico que puedes usar - aquí

Algunos más recursos que deberían ayudarle

 16
Author: Elvis D'Souza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:17:45

Puedes usar esto https://github.com/advancedrei/BootstrapForEmail para b-flejar su correo electrónico.

 10
Author: Viktorminator,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-07 14:27:10

Pasé algún tiempo recientemente buscando en la construcción de plantillas de correo electrónico html, la mejor solución que encontré fue usar esto http://htmlemailboilerplate.com / . Desde entonces he construido 3 plantillas bastante complejas y han funcionado bien en los diversos clientes de correo electrónico.

 1
Author: MattyHarris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-18 08:31:03

Hola Brian Armstrong， visita este enlace.

Este blog te dice cómo integrar Rails con Bootstrap less (usando premailer-rails).

Si estás usando bootstrap sass, podrías hacer lo mismo:

Comience importando algunos archivos sass de arranque en el correo electrónico.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';

Y luego en su vista <head> sección agregar <%= stylesheet_link_tag "email" %>

 1
Author: Shurui Yang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-16 04:09:37

El mejor enfoque que se me ha ocurrido es utilizar las importaciones Sass sobre una base seleccionada para extraer su bootstrap (o cualquier otro) estilos en los correos electrónicos que pueda ser necesario.

Primero, cree un nuevo archivo padre scss como email.scss para su estilo de correo electrónico. Esto podría verse así: 

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

Luego, en sus plantillas de correo electrónico, solo haga referencia a su correo electrónico compilado.archivo css, que solo contiene los estilos de bootstrap seleccionados a los que se hace referencia y anidados correctamente en su correo electrónico.scss.

Para por ejemplo, ciertos estilos de bootstrap entrarán en conflicto con el estilo de tabla responsive de Zurb. Para solucionar esto, puede anidar los estilos de bootstrap dentro de una clase padre u otro selector para llamar a los estilos de tabla de bootstrap solo cuando sea necesario.

De esta manera, tiene la flexibilidad de extraer clases solo cuando sea necesario. Verás que uso http://zurb.com/, que es una gran biblioteca de correo electrónico sensible para usar. Véase también http://zurb.com/ink/

Por último, utilice un premailer como https://github.com/fphilipe/premailer-rails3 mencionado anteriormente para procesar el estilo en css en línea, compilando estilos en línea solo para lo que se usa en esa plantilla de correo electrónico en particular. Por ejemplo, para premailer, tu archivo ruby podría verse algo como esto para compilar un correo electrónico en estilo inline.

    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

Espero que esto ayude! Ha estado luchando para encontrar un marco de plantillas de correo electrónico flexible en Pardot, Salesforce y los correos electrónicos diarios y de respuesta automática integrados de nuestro producto.

 0
Author: Ryan Walton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-29 22:02:02

El truco aquí es que no quieres incluir todo el bootstrap. El problema es que los clientes de correo electrónico ignorarán las consultas de medios y procesarán todos los estilos de impresión que tienen una gran cantidad de !declaraciones importantes.

En su lugar, solo necesita incluir las partes específicas de bootstrap que necesita. Mi correo electrónico.css.el archivo scss se ve así: 

@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';
 0
Author: gabeodess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-18 06:12:06