news 2026/6/23 20:47:52

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/23 20:45:26

Sui 主网升级至 V1.61.2

其他升级要点如下所示&#xff1a; 协议 #24343&#xff1a;对 coin.move 的框架进行了修改。 gRPC #24244&#xff1a;对于尚未完全写入的新检查点&#xff0c;不再返回 “Internal Error”&#xff0c;而是返回 “Not Found”。 GraphQL #24202&#xff1a;修复了一个与…

作者头像 李华
网站建设 2026/6/23 20:47:22

25、Kubernetes 应用部署与管理实践

Kubernetes 应用部署与管理实践 1. 简单应用请求分析与清理 在开始复杂的应用部署之前,我们先来看一个简单的请求示例。请求的 URI 为 http://192.168.99.100:8080/ ,服务器使用的是 nginx: 1.10.0 - lua: 10001 版本。请求头信息如下: | 请求头 | 值 | | ---- | --…

作者头像 李华
网站建设 2026/6/23 15:31:05

31、容器化应用设计理念与实践

容器化应用设计理念与实践 1. 配置管理 在应用开发和部署过程中,配置管理至关重要。建议将配置信息存储在环境变量中,而非代码库的文件里。这样做有诸多好处: - 便于将相同的代码库部署到不同环境,如预发布环境和生产环境,无需在代码中维护复杂配置,也无需为每个环境重…

作者头像 李华
网站建设 2026/6/23 12:21:51

如何评估LobeChat的加载速度与响应延迟?性能基准测试

如何评估LobeChat的加载速度与响应延迟&#xff1f;性能基准测试 在今天这个“快即是王道”的AI时代&#xff0c;用户早已习惯了秒级甚至毫秒级的交互反馈。当我们在网页上向一个聊天机器人提问时&#xff0c;哪怕只是多等了半秒钟才看到第一个字蹦出来&#xff0c;那种微妙的“…

作者头像 李华
网站建设 2026/6/23 19:48:29

缓存与数据库一致性解决方案深度解析

一、业务场景与挑战1.1 12306余票查询场景在12306系统中&#xff0c;用户需要实时查询列车不同站点、不同座位类型的余票信息。为提升查询性能&#xff0c;我们将余票信息缓存在Redis中。但在用户下单支付时&#xff0c;需要同时更新数据库和缓存中的余票数据。核心挑战&#x…

作者头像 李华
网站建设 2026/6/23 10:08:38

消息队列真仙:我的道念支持最终一致性

瑶池圣地&#xff0c;飞升台。九天罡风如刀&#xff0c;撕扯着白玉砌成的古老平台。万丈雷云在头顶凝聚&#xff0c;电蛇狂舞&#xff0c;酝酿着最后一重、也是最凶险的“九霄寂灭神雷”。台下&#xff0c;瑶池众仙娥、各方观礼道友&#xff0c;皆屏息凝神&#xff0c;目光聚焦…

作者头像 李华