Foundation CSS 参考手册-开发文档-JsSaaS开发平台

系统、网站、API站点，简单高效开发

Foundation 教程

Foundation5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation 麦哲伦（Magellan）导航 Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器(Equalizer)

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

Foundation 图标参考手册 Foundation CSS 参考手册 Foundation CSS 可见性

Foundation CSS 参考手册

Foundation 默认设置

Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。默认的字体为 "Helvetica Neue"， line-height 默认为 1.5。

这些设置是适用于 <body> 元素内的元素。

此外， <p> 元素与底部的外边距(margin-bottom) 为 1.25rem , line-height 为 1.6。

文本

以下的 HTML 元素，Foundation 设置了独立的样式渲染它，不会采用浏览器默认样式。点击 "尝试一下" 查看在线实例。

元素	描述	在线实例
<h1> - <h6>	h1 - h6 标题
<a>	浅蓝色的链接，鼠标移动到链接会有下划线
<small>	浅灰色的副标题文本
<blockquote>	引用内容模块
<strong>	加粗文本
<em>	斜体
<abbr>	指定单词的缩写，使用该元素文本出现虚线下划线，鼠标移动上去会有提示信息
<kbd>	接收键盘输入指令: `CTRL + P`
<hr>	水平线
<code>	代码片段
<ul>	无序列表
<ol>	有序列表
<dl>	描述性列表

文本对齐

使用 CSS 类来修改文本的对齐方式：

类	描述	实例
.text-left	左对齐文本
.text-right	右对齐文本
.text-center	居中
.text-justify	两端对齐

不同尺寸屏幕的对齐

使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式：

类	描述	实例
左对齐
.small-text-left	所有尺寸屏幕左对齐
.small-only-text-left	小尺寸屏幕左对齐(宽度小于 40em )
.medium-text-left	宽度大于 40.0625em 尺寸屏幕左对齐
.medium-only-text-left	宽度在 40.0625em 到 64em 尺寸的屏幕左对齐
.large-text-left	宽度大于 64.0625em 尺寸屏幕左对齐
.large-only-text-left	宽度在 64.0625em 到 90em 尺寸的屏幕左对齐
.xlarge-text-left	宽度大于 90.0625em 尺寸屏幕左对齐
.xlarge-only-text-left	宽度在 90.0625em 到 120em 尺寸的屏幕左对齐
.xxlarge-text-left	宽度大于 120em 尺寸屏幕左对齐

右对齐
.small-text-right	所有尺寸屏幕右对齐
.small-only-text-right	小尺寸屏幕右对齐(宽度小于 40em )
.medium-text-right	宽度大于 40.0625em 尺寸屏幕右对齐
.medium-only-text-right	宽度在 40.0625em 到 64em 尺寸的屏幕右对齐
.large-text-right	宽度大于 64.0625em 尺寸屏幕右对齐
.large-only-text-right	宽度在 64.0625em 到 90em 尺寸的屏幕右对齐
.xlarge-text-right	宽度大于 90.0625em 尺寸屏幕右对齐
.xlarge-only-text-right	宽度在 90.0625em 到 120em 尺寸的屏幕右对齐
.xxlarge-text-right	宽度大于 120em 尺寸屏幕右对齐

居中对齐
.small-text-center	所有尺寸屏幕居中对齐
.small-only-text-center	小尺寸屏幕居中对齐(宽度小于 40em )
.medium-text-center	宽度大于 40.0625em 尺寸屏幕居中对齐
.medium-only-text-center	宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐
.large-text-center	宽度大于 64.0625em 尺寸屏幕居中对齐
.large-only-text-center	宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐
.xlarge-text-center	宽度大于 90.0625em 尺寸屏幕居中对齐
.xlarge-only-text-center	宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐
.xxlarge-text-center	宽度大于 120em 尺寸屏幕居中对齐

两端对齐
.small-text-justify	所有尺寸屏幕都两端对齐
.small-only-text-justify	小尺寸屏幕两端对齐(宽度小于 40em )
.medium-text-justify	宽度大于 40.0625em 尺寸屏幕两端对齐
.medium-only-text-justify	宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐
.large-text-justify	宽度大于 64.0625em 尺寸屏幕两端对齐
.large-only-text-justify	宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐
.xlarge-text-justify	宽度大于 90.0625em 尺寸屏幕两端对齐
.xlarge-only-text-justify	宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐
.xxlarge-text-justify	宽度大于 120em 尺寸屏幕两端对齐

其他

类	描述	实例
.left	元素向左浮动
.right	元素向右浮动
.clearfix	清除浮动 - 必须添加在浮动元素的父元素上
.hide	隐藏元素 (CSS `display: none`)
.list-inline	将所有元素设置在同一行
.lead	让 <p> 元素更突出
.subheader	设置浅色的 <h1> - <h6> 元素