Foundation5 教程

2023-01-04阅读(409)

根据屏幕尺寸显示元素 以下类会根据设备(屏幕尺寸)来显示元素。 类 描述 .show-for-small-only 只在小型设备上显示元素 (屏幕宽度小于 40.0625em ) .show-for-medium-up 在中型及以上设备上显...

2023-01-03阅读(424)

Foundation 默认设置 Foundation 使用浏览器默认字体大小 (font-size:100%)。对于大多数桌面设备的浏览器来说，字体大小默认为 16px。对于移动设备的浏览器，字体默认大小为 12px。 默认的字体为&nbs...

2023-01-01阅读(492)

Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。 图标创建语法格式如下： 语法中 name 部分为图标指定的名称。 要使用图标，你可以将图片的样式文...

2023-01-01阅读(452)

以下我们收集了一些网格常用的实例。 三个均等列 该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠： 三个不均等列 该实例演示了如何创建三个不均等列 (25%/50%...

2023-01-01阅读(338)

块状网格用于均分页面内容：例如一行内要显示四张图片，不管什么屏幕下都需要均分宽度。 可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来...

2023-01-01阅读(388)

上一章节我们介绍了中型设备和小型设备的网格布局，小型设备上使用的比例为 25%/75% (.small-3 和 .small-9)，但在中型设备上使用的比例为 50%/50% (.medium-6 和 .medium-6)： 在大型设备上我...

2023-01-01阅读(375)

上一章节我们介绍了小型设备上我们使用 .small-* 类来设置，网格比例为 25%/75%： 在中型设备上我们推荐的比例为 50%/50%。 提示: 中型设备的屏幕尺寸定义在 40.0625em&n...

2023-01-01阅读(403)

假设我们在小型设备上有一个简单的网格布局，两列，宽度比例为 25% 和 75%。 提示: 小型设备的定义是屏幕小于 40.0625em。 小型设备上我们使用 .small-* 类。 以下实例设置了两个...

2023-01-01阅读(301)

以下实例创建了一个基本的网格系统，在 PC 和平板设备上它是水平平铺的，在手机等小型设备上它是水平堆叠的。

2023-01-01阅读(469)

Foundation 网格系统为 12 列。 如果你不需要 12 列，你可以合并一些列，创建一些更大宽度的列。 Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上，可能是三列，小屏幕尺寸就可能是三个单...