Foundation CSS Prototyping Utilities 显示类

Foundation CSS Prototyping Utilities 提供了一系列显示类，可以帮助程序员快速对网站进行布局、样式和操作的原型验证。这些类可以轻松地添加到 HTML 元素中，并改变它们的显示属性和行为，因此您可以快速地创建一个可交互的原型。

使用方法

在 HTML 中，只需将需要加入显示类的元素周围用<div>包裹起来并添加相应的显示类名即可。

例如，要将一个元素设置为半透明的淡蓝色背景：

<div class="bg-primary-75">背景色</div>

要将元素设置为绿色边框和阴影：

<div class="border-2 border-success shadow">阴影和边框</div>

在上面的例子中，您可以使用 border-2 来制定边框宽度和 border-success 来指定绿色边框。使用 shadow 可以为元素添加阴影效果。

常用类

下面是一些常用的显示类及其效果：

背景颜色

| Class Name | 示例效果 | | -------------------- | ------------------------------------------------------------ | | .bg-primary | 蓝色背景色 | | .bg-secondary | 灰色背景色 | | .bg-success | 绿色背景色 | | .bg-warning | 黄色背景色 | | .bg-danger | 红色背景色 | | .bg-info | 浅蓝色背景色 | | .bg-light | 浅灰色背景色 | | .bg-dark | 深灰色背景色 | | .bg-white | 白色背景色 | | .bg-transparent | 透明背景色 | | .bg-primary-75 | 半透明的蓝色背景色 | | .bg-secondary-75 | 半透明的灰色背景色 | | .bg-success-75 | 半透明的绿色背景色 | | .bg-warning-75 | 半透明的黄色背景色 | | .bg-danger-75 | 半透明的红色背景色 | | .bg-info-75 | 半透明的淡蓝色背景色 | | .bg-light-75 | 半透明的淡灰色背景色 | | .bg-dark-75 | 半透明的深灰色背景色 | | .bg-black-75 | 半透明的黑色背景色 | | .bg-white-75 | 半透明的白色背景色 | | .bg-primary-gradient | 渐变蓝色背景色 |

边框和阴影

| Class Name | 示例效果 | | ------------------------------ | ------------------------------------------------------------ | | .border | 默认宽度的黑色边框 | | .border-2 | 宽度为 2px 的黑色边框 | | .border-rounded | 圆角边框 | | .border-rounded-top | 顶部圆角边框 | | .border-primary | 蓝色边框 | | .border-success | 绿色边框 | | .border-warning | 黄色边框 | | .border-danger | 红色边框 | | .border-info | 浅蓝色边框 | | .border-gradient | 渐变边框 | | .shadow | 默认阴影效果 | | .shadow-small | 小阴影效果 | | .shadow-large | 大阴影效果 |

辅助样式

| Class Name | 示例效果 | | ---------------------------- | ------------------------------------------------------------ | | .text-justify | 文本两端对齐 | | .cursor-hand | 鼠标移动到元素上时指针形状改变为手指 | | .invisible | 隐藏元素，但仍保留空间 | | .opacity-50 | 透明度为 50% | | .opacity-25 | 透明度为 25% |

结尾

这些 Foundation CSS Prototyping Utilities 的显示类是在原型验证时非常有用的。使用它们，您可以快速地创建一个可交互的网站原型，让您的团队和客户能够更好地参与其中。