Saya menggunakan premailer-rails3permata yang menarik gaya sebaris untuk email html, dan saya mencoba membuatnya berfungsi dengan bootstrap Twitter.
https://github.com/fphilipe/premailer-rails3
Sepertinya beberapa gaya masuk dengan benar, tetapi tidak semuanya. Saya bertanya-tanya apakah ada yang memiliki contoh kerja yang bagus untuk mendapatkan css Bootstrap Twitter mereka (dimodifikasi atau tidak) menjadi email html.
Terima kasih!
Jawaban:
Jika yang Anda maksud adalah "Dapatkah saya menggunakan presentasi gaya Bootstrap dalam email?" maka Anda bisa, meskipun saya belum tahu siapa pun yang telah melakukannya. Anda harus mengodekan ulang semua yang ada di tabel.
Jika Anda menginginkan fungsionalitas, itu tergantung di mana email Anda dilihat. Jika sebagian besar pengguna Anda menggunakan Outlook, Gmail, Yahoo atau Hotmail (dan ini biasanya berjumlah sekitar 75% dari klien email) maka banyak kebaikan Bootstrap tidak mungkin dilakukan. Mac Mail, iOS Mail, dan Gmail di Android jauh lebih baik dalam merender CSS, jadi jika Anda menargetkan sebagian besar perangkat seluler, itu tidak terlalu buruk.
font-face- Anda hanya dapat menggunakan gambar eksternal. Semua sumber daya eksternal lainnya (file CSS, font) dikecualikan.:hover, :activestate tidak dapat ditata secara terpisahAda yang banyak dari jawaban pada SO, dan banyak link lain di internet pada umumnya.
Saya minta maaf karena telah menghidupkan kembali utas lama ini, tetapi saya hanya ingin memberi tahu semua orang bahwa ada Bootstrap yang sangat mirip seperti kerangka kerja CSS yang khusus dibuat untuk gaya email, berikut tautannya: http://zurb.com/ink/
Semoga bisa membantu seseorang.
Edit Ninja: Sejak itu telah diganti namanya menjadi Foundation for Emailsdan tautan barunya adalah: https://foundation.zurb.com/emails.html
Pengeditan diam tapi mematikan: Tautan baru https://get.foundation/emails.html
Berikut beberapa hal yang tidak dapat Anda lakukan dengan email:
- Sertakan bagian dengan gaya . Apple Mail.app mendukungnya, tetapi Gmail dan Hotmail tidak, jadi tidak boleh. Hotmail akan mendukung bagian gaya di body tetapi Gmail tetap tidak.
- Tautkan ke lembar gaya eksternal. Tidak banyak klien email yang mendukung ini, lebih baik lupakan saja.
- Background-image / Background-position. Gmail juga pelakunya yang satu ini.
- Bersihkan pelampung Anda . Gmail lagi.
- Margin . Ya, serius, Hotmail mengabaikan margin. Pada dasarnya semua posisi CSS sama sekali tidak berfungsi.
- Font-apa saja . Kemungkinan Eudora akan mengabaikan apa pun yang Anda coba nyatakan dengan font.
Sumber: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp memiliki template email yang dapat Anda gunakan - di sini
Beberapa sumber daya lagi yang akan membantu Anda
font-sizememberi Anda fleksibilitas yang lebih besar dengan biaya yang sangat sedikit.
Anda dapat menggunakan https://github.com/advancedrei/BootstrapForEmail ini untuk mengikat email Anda.
Saya menghabiskan beberapa waktu baru-baru ini melihat ke dalam membangun template email html, solusi terbaik yang saya temukan adalah menggunakan http://htmlemailboilerplate.com/ ini . Saya telah membangun 3 template yang cukup kompleks dan mereka telah bekerja dengan baik di berbagai klien email.
Hai Brian Armstrong, kunjungi tautan ini .
Blog ini memberi tahu Anda cara mengintegrasikan Rails dengan Bootstrap lebih sedikit (menggunakan premailer-rails).
Jika Anda menggunakan bootstrap sass, Anda dapat melakukan hal yang sama:
mulai dengan mengimpor beberapa file sass Bootstrap ke email.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';
dan kemudian di <head>bagian tampilan Anda tambahkan
<%= stylesheet_link_tag "email" %>
Pendekatan terbaik yang saya temukan adalah dengan menggunakan impor Sass atas dasar yang dipilih untuk menarik gaya bootstrap Anda (atau lainnya) ke dalam email yang mungkin diperlukan.
Pertama, buat file induk scss baru seperti email.scssuntuk gaya email Anda. Ini akan terlihat seperti ini:
// 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";
Kemudian di template email Anda, hanya rujuk file email.css yang telah dikompilasi, yang hanya berisi gaya bootstrap terpilih yang direferensikan dan disarangkan dengan benar di email.scss Anda.
Misalnya, gaya bootstrap tertentu akan bertentangan dengan gaya tabel responsif Zurb. Untuk memperbaikinya, Anda dapat menyarangkan gaya bootstrap dalam kelas induk atau pemilih lain untuk memanggil gaya tabel bootstrap hanya jika diperlukan.
Dengan cara ini, Anda memiliki fleksibilitas untuk menarik kelas hanya jika diperlukan. Anda akan melihat bahwa saya menggunakan http://zurb.com/perpustakaan email responsif yang bagus untuk digunakan. Lihat jugahttp://zurb.com/ink/
Terakhir, gunakan premailer seperti yang https://github.com/fphilipe/premailer-rails3disebutkan di atas untuk memproses gaya menjadi css sebaris, mengompilasi gaya sebaris hanya untuk apa yang digunakan dalam templat email tertentu itu. Misalnya, untuk premailer, file ruby Anda akan terlihat seperti ini untuk mengompilasi email menjadi gaya sebaris.
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
Semoga ini membantu! Telah berjuang untuk menemukan kerangka kerja templat email yang fleksibel di Pardot, Salesforce, dan respons otomatis bawaan produk kami serta email harian.
Triknya di sini adalah Anda tidak ingin menyertakan keseluruhan bootstrap. Masalahnya adalah klien email akan mengabaikan kueri media dan memproses semua gaya cetak yang memiliki banyak pernyataan penting.
Sebagai gantinya, Anda hanya perlu menyertakan bagian tertentu dari bootstrap yang Anda perlukan. File email.css.scss saya terlihat seperti ini:
@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';
Bagaimana dengan Bootstrap Email? Ini sepertinya sangat bagus dan kompatibel dengan bootstrap 4.