html - container - popovers bootstrap 4

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

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

Incluye una sección con estilos . Apple Mail.app lo admite, pero Gmail y Hotmail no, por lo que es un no-no. Hotmail admitirá una sección de estilo en el cuerpo pero Gmail aún no lo hace.
Enlace a una hoja de estilo externa. No hay muchos clientes de correo electrónico compatibles con esto, lo mejor es simplemente olvidarlo.
Imagen de fondo / Posición de fondo. Gmail también es el culpable de esto.
Despeja tus carrozas . Gmail nuevamente.
Margen Sip, en serio, Hotmail ignora los márgenes. Básicamente, cualquier posicionamiento de CSS no funciona.
Fuente-cualquier cosa . Es probable que Eudora ignore todo lo que intente declarar con las fuentes.

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

Mailchimp tiene plantillas de correo electrónico que puede usar, here

Algunos recursos más que deberían ayudarte

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

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

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

¡Gracias!

El mejor enfoque que he encontrado es usar las importaciones de Sass en una base seleccionada para incorporar su bootstrap (o cualquier otro) estilo a los correos electrónicos que pueda necesitar.

Primero, cree un nuevo archivo padre email.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 archivo compilado de email.css, que solo contiene los estilos de arranque seleccionados a los que se hace referencia y se anida correctamente en su correo electrónico.scss.

Por ejemplo, ciertos estilos de arranque van a entrar en conflicto con el estilo de mesa sensible de Zurb. Para solucionarlo, puede anidar los estilos de bootstrap dentro de una clase principal u otro selector para llamar a los estilos de tabla de bootstrap solo cuando sea necesario.

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

Por último, use 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 el premailer, su archivo ruby podría tener un aspecto similar a este para compilar un correo electrónico en estilo en línea.

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! Hemos estado luchando por encontrar un marco flexible de plantillas de correo electrónico en Pardot, Salesforce, y la respuesta automática integrada de nuestro producto y correos electrónicos diarios.

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 muchas declaraciones importantes.

En cambio, solo necesita incluir las partes específicas de bootstrap que necesita. Mi archivo email.css.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'';

Hola Brian Armstrong, visita este enlace .

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

Si está utilizando bootstrap sass, podría hacer lo mismo:

comience por importar algunos archivos Bootstrap sass en email.css.scss

y luego en su vista <head> section add <%= stylesheet_link_tag "email" %>

Me disculpo por resucitar este viejo hilo, pero solo quería que todos supieran que existe un marco CSS muy similar a Bootstrap creado específicamente para el estilo del correo electrónico, aquí está el enlace: http://zurb.com/ink/

Espero que ayude a alguien.

Edición de Ninja: desde entonces se le ha cambiado el nombre a Foundation for Emails y el nuevo enlace es: https://foundation.zurb.com/emails.html

Pasé algún tiempo estudiando la creación de plantillas de correo electrónico html, la mejor solución que encontré fue utilizar este http://htmlemailboilerplate.com/ . Desde entonces, he creado 3 plantillas bastante complejas y han funcionado bien en varios clientes de correo electrónico.

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

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

Si buscas funcionalidad, depende de dónde se ven tus correos electrónicos. Si una proporción significativa de sus usuarios está en Outlook, Gmail, Yahoo o Hotmail (y estos normalmente suman alrededor del 75% de los clientes de correo electrónico), entonces no es posible obtener una gran bondad de Bootstrap. Mac Mail, iOS Mail y Gmail en Android son mucho mejores en la renderizació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 correo electrónico del correo electrónico (también conocido como carpeta de spam). Esto significa que LESS también está fuera de límites, aunque obviamente puede usar los estilos CSS resultantes si así lo desea.
El CSS en línea es mucho más seguro de usar que cualquier otro tipo de CSS (incrustado es posible, vinculado es un rotundo no). Las consultas de medios son posibles, por lo que puede tener algún tipo de diseño receptivo. Sin embargo, hay una larga lista de atributos de CSS que no funcionan; esencialmente, el modelo de caja no está soportado en gran medida en los clientes de correo electrónico. Necesitas estructurar todo con tablas.
font-face : solo puedes usar imágenes externas. Todos los demás recursos externos (archivos CSS, fuentes) están excluidos.
glifos y sprites: debido a la implementación extraña de las imágenes de fondo (VML) de Outlook 2007, no puedes usar background-repeat o position.
pseudo-selectores no son posibles - por ejemplo :hover :active estados :active no se pueden diseñar por separado

Hay loads answers on SO, y muchos otros enlaces en Internet en general.