news 2026/6/12 10:47:32

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/6/12 14:03:00

14、Docker 容器操作与日志管理全解析

Docker 容器操作与日志管理全解析 1. 远程容器命令执行 在 Docker 中,我们可以让 Docker 在远程容器上运行 cat /etc/passwd 命令,这样就能获取容器文件系统中 /etc/passwd 文件的内容。由于这只是标准输出,我们可以像处理其他输出一样将其通过管道传递给本地命令。 …

作者头像 李华
网站建设 2026/6/12 14:03:11

AutoGPT在智能家居控制系统的集成可能性分析

AutoGPT在智能家居控制系统的集成可能性分析 你有没有过这样的经历&#xff1a;晚上想安静地读会儿书&#xff0c;于是你得先打开阅读灯、调到暖光模式&#xff0c;再去关掉客厅的主灯和电视&#xff0c;接着拉上窗帘&#xff0c;最后打开音响播放轻音乐——一连串操作下来&…

作者头像 李华