news 2026/3/10 11:31:17

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/3/7 0:22:12

22、Docker Swarm 模式:从基础到实践

Docker Swarm 模式:从基础到实践 1. 基础部署与应用上线 在容器部署中,我们可以借助相关工具实现应用的快速上线。例如,Centurion 可以完成拉取所需镜像、验证镜像拉取是否正确,接着连接到主机停止旧容器、创建新容器并启动,还会持续进行健康检查,直到容器报告健康状态…

作者头像 李华
网站建设 2026/3/9 14:20:21

24、容器编排:从 ECS 到 Kubernetes 的实践指南

容器编排:从 ECS 到 Kubernetes 的实践指南 1. ECS 任务清理与进阶准备 在使用 AWS ECS(Elastic Container Service)时,当你使用相同的任务 ID 再次描述任务,你会发现 lastStatus 键被设置为 STOPPED 。例如: $ aws ecs describe-tasks --cluster fargate-testin…

作者头像 李华
网站建设 2026/3/4 23:51:11

26、Docker高级技术深度解析

Docker高级技术深度解析 1. Kubernetes与Docker生态 Kubernetes是一个庞大的系统,社区参与度极高。它与Docker生态系统有很大的重叠部分,同时也发展出了许多自己的组件。Docker与Kubernetes之间的集成日益增强。之前我们通过Minikube让大家初步了解了相关内容,但如果你感兴…

作者头像 李华
网站建设 2026/3/9 22:13:12

29、Docker 高级配置与架构解析

Docker 高级配置与架构解析 1. Docker 网络配置 在 Docker 中,可以进行多种网络配置,基本的网络配置相对简单。例如,创建一个 macvlan 网络: $ docker network create -d macvlan \--subnet=172.16.16.0/24 \--gateway=172.16.16.1 \-o parent=eth0 ourvlan还可以通…

作者头像 李华
网站建设 2026/3/6 20:44:50

30、Docker高级特性与容器平台设计全解析

Docker高级特性与容器平台设计全解析 1. 探索runc与容器统计信息 在容器技术领域,runc是一个重要的组件。通过查看文件列表,我们能发现一些与容器配置和运行相关的文件,例如 config.json 文件,它类似于 docker inspect 的详细输出,不过由于其内容较多,这里不做展示…

作者头像 李华
网站建设 2026/3/5 3:35:27

从机房打杂到月入 5W:5 年底层打工人转行安全,说点掏心窝的实话

01、机房狗的血泪史 老子干了五年运维&#xff0c;从IDC到云平台&#xff0c;从搬服务器到舔K8s&#xff0c;最后发现——这行就是他妈的高级电工&#xff01; 前两年在野鸡IDC&#xff1a; 每天重启服务器300次换硬盘比换女朋友还勤快最牛逼的技术是能用网线抽蟑螂 后来跳…

作者头像 李华