前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载本文以 Foundation for Emails 的 Button按钮组件为核心讲解如何用 Inky 的button标签与.button类构建在所有邮件客户端包括 Outlook中都能稳定渲染的按钮。读完你将掌握按钮的嵌套表格结构、尺寸/颜色/圆角/空心等全部修饰类、href属性的兼容性陷阱以及背后 scss/components/_button.scss 的源码级原理可直接复制到自己的邮件模板中实战使用。按钮的基础结构为什么是“表格套表格”邮件客户端对 CSS 的支持参差不齐想要做出在所有客户端中“防弹”bullet-proof的按钮唯一可靠的做法是使用表格嵌套表格的结构而不是a加 CSS 边框。正确的做法是在外层table上添加.button类在内层表格中放入带href属性的a标签。在 Inky 模板语言中只需一个button标签即可自动生成上述全部表格标记button href#Button/buttonInky 会把这一行转换成完整的嵌套表格 HTML让你免于手写一摞table、tr、tdInky 支持的完整标签清单见 docs/pages/inky.md。两个必须牢记的兼容性要点务必给button添加href属性否则 Outlook.com 在渲染后的邮件中会显示[undefined]字样破坏邮件观感。Office 365 和 Outlook.com 要求 href 中必须是有效 URL如果暂时没有真实链接可以使用#占位符这与测试页 test/visual/pages/button-hollow.html 中的用法一致。尺寸控制tiny / small / default / large按钮默认由内容和内边距决定宽度自动收缩除非显式设置为展开见下一节 Expanded。Foundation 提供了四种尺寸类加到按钮的外层table上即可生效类名内边距padding字号font-size字体粗细.tiny4px 8px10pxnormal非加粗.small5px 10px12pxbold默认无类名8px 16px16pxbold.large10px 20px20pxbold上表数值来自 scss/settings/_settings.scss 中的$button-padding与$button-font-size两个 Map以及 scss/components/_button.scss 中table.button.tiny/small/large的样式块。注意.tiny会额外把字重降为normal其余尺寸均为bold$button-font-weight。在 Inky 中把同样的类加到button标签上即可button href# classtinyTiny Button/button button href# classsmallSmall Button/button button href#Default Button/button button href# classlargeLarge Button/button别忘了href——无论哪种尺寸这既是点击跳转的必需属性也是规避 Outlook.com[undefined]问题的关键。Expanded让按钮占满容器宽度默认按钮的宽度由内容撑开。若想让按钮占满其父容器整行宽度需要两步在外层table上加.expanded类在a外面包一层center标签Inky 中同样加类即可。row column button href# classexpandedExpanded Button/button button href# classsmall-expandedExpand small only/button /column /row源码层面scss/components/_button.scss 中table.button.expand, table.button.expanded会同时把外层表格、内层表格和a的宽度设为 100%并将文本居中对齐、清除左右内边距同时把center的min-width归零确保在窄容器中也能正确铺满。.expand是.expanded的等价别名scss/grid/_grid.scss 中网格容器内的按钮也有同样的expand/expanded处理。small-expanded仅在小屏展开.small-expanded等价别名.small-expanded与.small-expand只在小屏断点以下生效媒体查询内会把按钮强制拉宽至 100%、文本居中并清除左右内边距而桌面端保持原有宽度。实现见 scss/components/_media-query.scss。这在移动端优先的邮件布局中非常实用——桌面端保持紧凑手机端整行可点。颜色方案secondary / success / warning / alert按钮背景色默认使用主题主色$primary-color。通过在外层table或 Inky 的button上追加以下类可以快速切换语义色button href# classsecondarySecondary Button/button button href# classsuccessSuccess Button/button button href# classwarningWarning Button/button button href# classalertAlert Button/button各颜色在 scss/settings/_settings.scss 中的默认值类名对应变量默认色值.secondary$secondary-color#777777灰.success$success-color#3adb76绿.warning$warning-color#ffae00橙.alert$alert-color#ec5840红默认$primary-color#2199e8蓝这些类在 scss/components/_button.scss 中分别重写了td的背景色、a的边框色并定义了 hover 状态——hover 时背景色会通过color.adjust(..., $lightness: -10%)整体加深 10% 亮度secondary则是提亮 10%见$button-secondary-background-hover。若主题色被自定义覆盖按钮颜色会自动跟随无需改组件代码。圆角与胶囊radius / rounded追加.radius或.rounded类即可分别获得小圆角与胶囊pill状按钮button href# classradiusRadius/button button href# classroundedRound/button两个值得注意的前提border-radius在 Outlook 2000–2013、Yahoo! Mail 和 Android 4Gmail中不受支持这些客户端里按钮会退化为直角这是邮件开发的客观限制创建.radius/.rounded按钮时必须移除边框。源码中正是这样实现的scss/components/_button.scss 里.radius table td与.rounded table td会设置border-radius并强制border: none。圆角半径取自全局变量$button-radius: $global-radius默认3px、$button-rounded: $global-rounded默认500px足以把任意高度的按钮变成胶囊均可在 scss/settings/_settings.scss 中调整。Hollow 空心按钮只留描边与文字.hollow类可以把按钮变成透明背景、仅保留文字颜色与描边的线框样式并且可以与前面所有类自由组合实现“混搭”button href# classhollowHollow Button/button button href# classhollow secondary radiusSecondary Button/button button href# classhollow success roundSuccess Button/button button href# classhollow warning tinyWarning Button/button button href# classhollow alert expandedAlert Button/button源码层面scss/components/_button.scss 定义了一个hollow-button($color, $class)的 Sass mixin它会把td的背景强制设为transparent、清空边框与圆角然后为a应用1px solid的描边和同色文字hover 时描边与文字均加深 10% 亮度。mixin 依次为primary、secondary、alert、warning、success五套色系生成了.hollow.secondary、.hollow.alert等组合规则且.hollow.radius、.hollow.rounded会重新为a应用对应圆角——所以空心按钮同样可以叠加圆角或胶囊效果。实战验证与扩展组合仓库提供了覆盖上述全部特性的视觉回归测试页可直接查看真实渲染效果test/visual/pages/button-inky.html覆盖 tiny/small/default/large 四种尺寸、五种颜色、.expand、.small-expand、.radius/.rounded与.hollow的完整组合test/visual/pages/button-expanded-inky.html验证.expanded在不同列宽3/9、4/8、6/6 等下的铺满效果以及按钮嵌套在 callout 中的场景test/visual/pages/button-hollow.html验证 hollow 与round、radius、expanded叠加后的线框按钮。例如把展开、圆角与社交场景结合参考 button-expanded 测试页中的 Facebook/Twitter/Google 按钮写法可以写出这样的全宽圆角 CTAbutton classexpanded radius href#立即注册/button button classhollow expanded rounded secondary href#了解更多/button小结Foundation for Emails 的 Button 组件通过“外层表格加.button类、内层表格放带href的a”这一固定结构绕开了邮件客户端对 CSS 支持的种种限制。日常使用只需记住尺寸用tiny/small/large铺满用expanded小屏专用small-expanded配色用secondary/success/warning/alert圆角用radius/rounded线框用hollow且所有修饰类均可自由叠加。所有样式变量的默认值都集中在 scss/settings/_settings.scss 的“5. Button”区块改主题时优先从这里入手组件代码无需任何改动即可跟随新主题。赞分享前端【免费下载链接】foundation-emailsQuickly create responsive HTML emails that work on any device and client. Even Outlook.项目地址https://gitcode.com/gh_mirrors/fo/foundation-emails点击查看免费下载相关推荐Foundation for Emails 邮件客户端兼容性完全指南Foundation for Emails 邮件客户端兼容性完全指南 前言 在电子邮件开发领域兼容性问题一直是开发者面临的最大挑战之一。Foundation前端Foundation for Emails Menu 组件实战指南用 Inky 快速构建跨客户端的横向/纵向链接菜单Foundation for Emails Menu 组件实战指南用 Inky 快速构建跨客户端的横向/纵向链接菜单 导读 Menu菜单是 Foundat前端Kafka 多租户集群规划与运维实践命名空间、配额、安全隔离与监控Kafka 多租户集群规划与运维实践命名空间、配额、安全隔离与监控 导读 Kafka 作为一个高可扩展的分布式事件流平台常被企业当作连接各业务系统与应用的前端上一篇Nemotron-CLIMB代理模型实战教程从下载到推理的完整流程下一篇如何用Pixelle-Video一键生成AI短视频3分钟完成专业内容创作创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考