Saya menggunakan premailer-rails3
permata 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!
html
twitter-bootstrap
html-email
Brian Armstrong
sumber
sumber
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
,:active
state tidak dapat ditata secara terpisahAda yang banyak dari jawaban pada SO, dan banyak link lain di internet pada umumnya.
sumber
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 Emails
dan tautan barunya adalah: https://foundation.zurb.com/emails.htmlPengeditan diam tapi mematikan: Tautan baru https://get.foundation/emails.html
sumber
Berikut beberapa hal yang tidak dapat Anda lakukan dengan email:
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
sumber
font-size
memberi Anda fleksibilitas yang lebih besar dengan biaya yang sangat sedikit.Anda dapat menggunakan https://github.com/advancedrei/BootstrapForEmail ini untuk mengikat email Anda.
sumber
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.
sumber
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" %>
sumber
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.scss
untuk 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-rails3
disebutkan 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.
sumber
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';
sumber
Bagaimana dengan Bootstrap Email? Ini sepertinya sangat bagus dan kompatibel dengan bootstrap 4.
sumber