news 2026/4/23 18:00:39

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/4/23 12:58:41

大型语言模型(LLM)架构大比拼

大型语言模型&#xff08;LLM&#xff09;架构大比拼 从 DeepSeek-V3 到 MiniMax-M2&#xff1a;现代 LLM 架构设计一览 自原始 GPT 架构问世至今已过去七年。乍看之下&#xff0c;从 GPT-2&#xff08;2019 年&#xff09;到DeepSeek-V3 与 Llama 4&#xff08;2024–2025 年…

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

计算机毕业设计springboot考研资讯管理系统 基于 Spring Boot 的考研信息管理平台设计与实现 Spring Boot 架构下的考研资讯管理系统开发

计算机毕业设计springboot考研资讯管理系统pr8069&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着互联网技术的飞速发展&#xff0c;考研资讯管理的需求也在不断增长。传统的…

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

【AI新书热卖榜top1】学大模型RAG看这本书就够了!!—《大模型RAG实战-RAG原理、应用与系统构建》

给大家详细介绍一波&#xff0c;就是这本《大模型RAG实战-RAG原理、应用与系统构建》内容简介&#xff1a; 这是一本全面讲解RAG技术原理、实战应用与系统构建的著作。作者结合自身丰富的实战经验&#xff0c;详细阐述了RAG的基础原理、核心组件、优缺点以及使用场景&#xff0…

作者头像 李华
网站建设 2026/4/23 12:47:01

iPhone如何关闭“查找我的iPhone”

在日常生活中&#xff0c;iPhone 用户可能会遇到需要暂时或永久关闭“查找我的iPhone”功能的情况。无论是出于隐私考虑&#xff0c;还是为了重置设备&#xff0c;了解如何正确关闭这一功能显得尤为重要。本文将详细介绍三种方法&#xff1a;通过iPhone设置关闭、在其他设备上关…

作者头像 李华
网站建设 2026/4/23 12:48:52

MySQL事务核心机制与日志系统详解

一、事务基础与ACID特性1.1 事务的基本概念数据库事务是指作为单个逻辑工作单元执行的一系列操作&#xff0c;要么全部成功&#xff0c;要么全部失败。事务是保证数据一致性和完整性的关键机制。1.2 ACID特性解析原子性&#xff08;Atomicity&#xff09;&#xff1a;事务是不可…

作者头像 李华