news 2026/6/1 5:30:33

Foundation 文本

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Foundation 文本

Foundation 5 文本(Typography)

Foundation 5 提供了丰富的排版(Typography)工具,包括标题、段落、内联文本元素、对齐方式等。默认样式基于 Sass 变量,可自定义,但开箱即用非常美观。

1. 基本文本元素
  • 标题(Headings):直接使用<h1><h6>,Foundation 会自动应用样式。
  • 段落(Paragraphs)<p>标签默认有合适行高和边距。
  • 引导段落(Lead Paragraph):用于突出介绍文字,加类.lead
  • 副标题(Subheader):加类.subheader,文字变浅、变轻。
2. 内联文本元素
  • <small>:小文字(用于副标题等)。
  • .text-left/.text-right/.text-center/.text-justify:文本对齐。
  • 其他:<strong><em><abbr>等标准 HTML 元素均有样式。
3. 代码示例

在你的 HTML 中直接添加以下内容测试:

<divclass="row"><divclass="columns"><h1>一级标题 h1</h1><h2class="subheader">二级标题 .subheader(浅色副标题)</h2><pclass="lead">这是一个引导段落(.lead),字体更大、更突出,用于页面介绍。</p><p>普通段落文字。Foundation 默认提供了良好的行高和可读性。<small>这是 small 小文字。</small></p><pclass="text-left">左对齐文本(.text-left,默认)</p><pclass="text-center">居中对齐文本(.text-center)</p><pclass="text-right">右对齐文本(.text-right)</p><pclass="text-justify">两端对齐文本(.text-justify),适合长段落。</p></div></div>
4. 其他常用类
  • .show-for-small-only/.hide-for-medium-up等:响应式显示/隐藏文本(结合 Visibility Classes)。
  • 无序/有序列表:<ul><ol>默认有样式,加.no-bullet可去除项目符号。

这些样式无需额外 JS,直接在 HTML 类名中添加即可生效。复制以上代码到你的起步模板中运行,就能看到效果!

如果想学列表、块引用或其他组件(如按钮、标签),继续告诉我!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/24 19:11:07

DeepSeek大模型API实战指南,python一键调用AI超能力打造多轮对话机器人!

在人工智能技术飞速发展的今天&#xff0c;大模型已经成为各行各业提升效率的利器。从会议记录撰写到代码编程&#xff0c;从数据分析到总结报告生成等各个领域都少不了大模型的参与。目前大家使用大模型的方法基本是在对话界面向大模型提出问题并得到解决方案。 然而&#xff…

作者头像 李华
网站建设 2026/5/27 21:24:26

18、Docker容器调试与Compose使用指南

Docker容器调试与Compose使用指南 1. 容器目录文件与故障排查 在容器运行过程中,特定目录包含了一些直接挂载到容器内的文件,如 hosts 、 resolv.conf 和 hostname 。若使用默认日志机制,该目录还会存储 docker logs 命令显示的日志JSON文件、 docker inspect 输…

作者头像 李华
网站建设 2026/6/1 5:48:17

32、Docker:现代容器化构建与部署的全面解析

Docker:现代容器化构建与部署的全面解析 1. Docker 解决的挑战 在传统的部署工作流程中,常常存在大量繁琐的步骤,这给团队带来了诸多困扰。每增加一个部署步骤,都会增加应用程序发布到生产环境的风险。Docker 结合了工作流和简单的工具集,直接针对这些问题。它促使开发过…

作者头像 李华
网站建设 2026/5/31 22:47:44

短视频 / 图片不够清?SeedVR2.5 超分操作指南,一键拉满画质

eedVR2介绍SeedVR2 2.5.10于2025年11月13日正式发布&#xff0c;适用于 ComfyUI&#xff0c;支持高质量视频和图像放大。其主要特点如下&#xff1a;&#xff08;一&#xff09;核心能力高质量基于扩散的放大 &#xff1a;视频和图像增强的一步扩散模型时间一致性 &#xff1a;…

作者头像 李华