原型工具
使用 Foundation 的原型工具快速创建布局和 UI 原型。这些可选的类和混合非常适合将草图和模型快速转换为编码原型。
从原型到生产
原型设计使我们能够更清楚地看到问题，而且通常是在开发过程的早期阶段。草图或线框图中的设计只能让我们在理解行为、可行性和实现成本（时间或资源）方面走得更远。原型设计流程促进了设计师和开发人员之间的密切合作，以找到更好的解决方案。
有时原型代码注定要被丢弃，这没关系。在早期开发阶段，将想法和交互呈现出来并与利益相关者分享以供审查是非常有价值的。这就是想法得到充实和改进的方式。我们交付的不是代码，而是问题的解决方案。提出想法，获得反馈，迭代，重复。然后，当各方都对正在采取的正确方法感到满意时，再回过头来清理和重构。
Foundation 的原型工具可帮助您从头开始超快速地构建编码原型。这使您能够通过反馈和实验更快地找到正确的答案。从定位到视觉样式，有一系列实用程序可供选择。每个实用程序都有一个混合，因此您可以使用自己的自定义类或在生产中将类交换为混合以获得更清晰的标记。
默认情况下禁用原型模式！
并非所有项目都需要原型工具，添加像这样的实用程序类会增加 CSS 文件大小，尤其是在您没有全部使用它们的情况下。出于这些原因，默认情况下禁用原型模式。
许多原型类使用 `!important` 来确保它们不会被更具体的选择器覆盖。该框架有意识地避免使用 `!important` 声明。请注意，我们只在那些不应该被覆盖的特定 **CSS** 属性上插入了 `!important`。
启用原型模式
像下面这样的原型类应该只用于原型设计任务。此外，如果您正在使用 **Sass**，我们鼓励您改用 **[原型混合](#sass-mixins)**。
使用 Sass 版本的 Foundation，您可以通过两种方式启用原型模式
如果您在主 Sass 文件中使用 foundation-everything() 混合，只需传入 $prototype: true 即可启用原型模式。
@include foundation-everything($prototype: true);如果您手动包含了每个组件（就像我们的入门项目那样），请打开您的 app.scss 文件并简单地注释掉
// @include foundation-prototype-classes;所以它看起来像
@include foundation-prototype-classes;您可以改为仅导入您需要的特定实用程序类。为了方便起见，下面列出了完整列表
@include foundation-prototype-typescale;
@include foundation-prototype-text-utilities;
@include foundation-prototype-text-transformation;
@include foundation-prototype-text-decoration;
@include foundation-prototype-font-styling;
@include foundation-prototype-list-style-type;
@include foundation-prototype-rounded;
@include foundation-prototype-bordered;
@include foundation-prototype-shadow;
@include foundation-prototype-arrow;
@include foundation-prototype-separator;
@include foundation-prototype-overflow;
@include foundation-prototype-display;
@include foundation-prototype-position;
@include foundation-prototype-border-box;
@include foundation-prototype-border-none;
@include foundation-prototype-sizing;
@include foundation-prototype-spacing;想要更多自定义？点击此处查看 Sass 参考
响应式断点
默认情况下禁用响应式断点。
这些原型类还具有可选的移动优先响应类，因此设置类将应用于小断点和大断点，除非被更大断点的类覆盖。
您可以通过将 $global-prototype-breakpoints 设置为 true 来轻松启用这些类。
<p class="medium-text-uppercase">This text will be uppercase for medium and up.</p>
<p class="large-text-lowercase">This text will be lowercase for large breakpoint.</p>您还可以通过选择仅为需要作为响应类的特定原型助手添加响应断点来自定义内容。
例如，文本转换类有一个断点变量 $prototype-transformation-breakpoints，它被设置为 $global-prototype-breakpoints，默认情况下设置为 false。要为文本转换类启用响应断点，只需设置
$prototype-transformation-breakpoints: true;组件样式
这些 .radius、.rounded、.bordered 和 .shadow 类可以独立使用或组合使用，分别通过圆角、赋予浅边框和创建阴影来设置组件样式。主要用于按钮、卡片、表格、图像等等。
shadow-hover-focus 的内容。[Codepen 示例](https://codepen.io/IamManchanda/pen/XMRMwo)
在视频中观看此部分按钮
<button type="button" class="button radius bordered shadow primary">Primary</button>
<button type="button" class="button rounded bordered shadow secondary">Secondary</button>
<button type="button" class="button radius bordered shadow success">Success</button>
<button type="button" class="button rounded bordered shadow alert">Alert</button>
<button type="button" class="button radius bordered shadow warning">Warning</button>开关
将 .rounded 类添加到 .switch 以使其变圆。
<div class="switch rounded">
<input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr">Download Kittens</span>
</label>
</div>卡片
<div class="radius bordered shadow card">
<img src="https://placehold.it/500x250">
<div class="card-divider">
Styled Card
</div>
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
这是一张卡片。
它有一种易于覆盖的视觉风格，并且经过适当的柔和处理。
这是一张卡片。
它有一种易于覆盖的视觉风格，并且经过适当的柔和处理。
这是一张卡片。
它有一种易于覆盖的视觉风格，并且经过适当的柔和处理。
表格
<table class="radius bordered shadow">
<!-- My Table goes here -->
</table>| 表头 | 表头 | 表头 | 表头 |
|---|---|---|---|
| 内容在此处 | 这是较长的内容 Donec id elit non mi porta gravida at eget metus。 | 内容在此处 | 内容在此处 |
| 内容在此处 | 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 | 内容在此处 | 内容在此处 |
| 内容在此处 | 这是较长的内容 Donec id elit non mi porta gravida at eget metus。 | 内容在此处 | 内容在此处 |
| 内容在此处 | 这是较长的内容在此处 Donec id elit non mi porta gravida at eget metus。 | 内容在此处 | 内容在此处 |
图像
<img src="https://placehold.it/150x150" class="radius">箭头工具
主要用作导航的下拉箭头。
<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>分隔符
这会在元素标题下方创建一个微小的分隔符，通常用于节标题中。
<h3 class="separator-left">Lorem</h3>
<h3 class="separator-center">Ipsum Dolor</h3>
<h3 class="separator-right">Tempor</h3>Lorem
Ipsum Dolor
Tempor
字体样式
您可以使用字体样式来设置文本样式。您可以通过向元素添加 font-normal、font-bold、font-italic 来更改字体样式。您还可以使用 font-wide 放大元素的文本。
<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
<p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?
列表样式
.no-bullet，默认情况下对有序列表和无序列表都启用。无序列表
<ul class="no-bullet"></ul>
<ul class="list-disc"></ul>
<ul class="list-circle"></ul>
<ul class="list-square"></ul>有序列表
<ol class="no-bullet"></ol>
<ol class="list-decimal"></ol>
<ol class="list-lower-alpha"></ol>
<ol class="list-lower-latin"></ol>
<ol class="list-lower-roman"></ol>
<ol class="list-upper-alpha"></ol>
<ol class="list-upper-latin"></ol>
<ol class="list-upper-roman"></ol>文本助手
图像替换（隐藏文本）
您可以包含一个带有视觉隐藏的辅助文本的图像，以实现可访问性和改进 SEO。.text-hide 类将在图像上下文中视觉隐藏元素的文本。
<a href="#" class="text-hide">
<img src="https://placehold.it/100x30" alt="zurb logo">
Zurb <!-- Logo Text -->
</a>
Zurb
文本转换
文本转换允许您控制文本的大小写。您可以通过向元素添加 .text-uppercase、text-lowercase、text-capitalize 来更改文本转换。
<p class="text-uppercase"><!-- Text here --></p>
<p class="text-lowercase"><!-- Text here --></p>
<p class="text-capitalize"><!-- Text here --></p>这是大写文本。故事发生在银河帝国纪元元年，也就是“基地纪元”元年。《银河帝国史》以川陀为开篇，它是拥有 12,000 年历史的银河帝国的首都。尽管帝国表面上稳定而强大，但它正在慢慢衰落，其方式与西罗马帝国的衰落相似。
这是小写文本。故事发生在银河帝国纪元元年，也就是“基地纪元”元年。《银河帝国史》以川陀为开篇，它是拥有 12,000 年历史的银河帝国的首都。尽管帝国表面上稳定而强大，但它正在慢慢衰落，其方式与西罗马帝国的衰落相似。
这是一段首字母大写的文本。 故事背景设定在公元 0 年（“基地纪元”），《基地》开篇于川陀，这个拥有 12,000 年历史的银河帝国的首都。 虽然帝国看起来稳定而强大，但它正在慢慢衰落，其方式与西罗马帝国的衰落相似。
文本装饰
文本装饰可用于为文本添加下划线、上划线或删除线。 您可以通过向元素添加 .text-underline、.text-overline 或 .text-line-through 来更改文本装饰。
<p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="text-overline">Perspiciatis tempore cumque, magni aspernatur, quidem</p>
<p class="text-line-through">Lorem minus, placeat, iure voluptas aliquam tempora neque?</p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Perspiciatis tempore cumque, magni aspernatur, quidem
Lorem minus, placeat, iure voluptas aliquam tempora neque?
文本截断
.text-truncate 类将截断您的文本并显示省略号。 此类适用于单行文本。
<p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!
文本不换行
如果您想防止文本换行到下一行，可以使用 .text-nowrap。 请注意，除非使用 <br> 标签，否则文本将继续保持在同一行。
<p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>文本换行
要强制文本换行到下一行，可以使用 .text-wrap。
<p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>边距助手
使用这些易于使用的边距类在元素周围生成间距。
边距（所有边）
<div class="margin-0"></div>
<div class="margin-1"></div>
<div class="margin-2"></div>
<div class="margin-3"></div>上边距
<div class="margin-top-0"></div>
<div class="margin-top-1"></div>
<div class="margin-top-2"></div>
<div class="margin-top-3"></div>下边距
<div class="margin-bottom-0"></div>
<div class="margin-bottom-1"></div>
<div class="margin-bottom-2"></div>
<div class="margin-bottom-3"></div>左边距
<div class="margin-left-0"></div>
<div class="margin-left-1"></div>
<div class="margin-left-2"></div>
<div class="margin-left-3"></div>右边距
<div class="margin-right-0"></div>
<div class="margin-right-1"></div>
<div class="margin-right-2"></div>
<div class="margin-right-3"></div>左右边距（水平轴）
<div class="margin-horizontal-0"></div>
<div class="margin-horizontal-1"></div>
<div class="margin-horizontal-2"></div>
<div class="margin-horizontal-3"></div>上下边距（垂直轴）
<div class="margin-vertical-0"></div>
<div class="margin-vertical-1"></div>
<div class="margin-vertical-2"></div>
<div class="margin-vertical-3"></div>边距：用作混合宏
.foo {
@include margin(1, 0, 2, null);
}以上代码将生成以下输出
.foo {
margin-top: 1rem !important;
margin-right: 0 !important;
margin-bottom: 2rem !important;
}注意：`margin-left` 属性未打印，因为此混合宏也接受 `null` 作为值以减少 CSS 输出。 请参阅此处的 Sass 参考
填充助手
使用这些易于使用的填充类在内容周围生成间距。
填充（所有边）
<div class="padding-0"></div>
<div class="padding-1"></div>
<div class="padding-2"></div>
<div class="padding-3"></div>上填充
<div class="padding-top-0"></div>
<div class="padding-top-1"></div>
<div class="padding-top-2"></div>
<div class="padding-top-3"></div>下填充
<div class="padding-bottom-0"></div>
<div class="padding-bottom-1"></div>
<div class="padding-bottom-2"></div>
<div class="padding-bottom-3"></div>左填充
<div class="padding-left-0"></div>
<div class="padding-left-1"></div>
<div class="padding-left-2"></div>
<div class="padding-left-3"></div>右填充
<div class="padding-right-0"></div>
<div class="padding-right-1"></div>
<div class="padding-right-2"></div>
<div class="padding-right-3"></div>左右填充（水平轴）
<div class="padding-horizontal-0"></div>
<div class="padding-horizontal-1"></div>
<div class="padding-horizontal-2"></div>
<div class="padding-horizontal-3"></div>上下填充（垂直轴）
<div class="padding-vertical-0"></div>
<div class="padding-vertical-1"></div>
<div class="padding-vertical-2"></div>
<div class="padding-vertical-3"></div>填充：用作混合宏
.bar {
@include padding(1, 0, 2, null);
}以上代码将生成以下输出
.bar {
padding-top: 1rem !important;
padding-right: 0 !important;
padding-bottom: 2rem !important;
}注意：`padding-left` 属性未打印，因为此混合宏也接受 `null` 作为值以减少 CSS 输出。 请参阅此处的 Sass 参考
尺寸
这些宽度和高度类可帮助您轻松地使元素相对于其父元素达到所需的宽度或高度。 默认情况下，它支持 `25%`、`50%`、`75%` 和 `100%`。 但是，您可以通过 Sass map 变量添加更多尺寸。
宽度
<div class="width-25"></div>
<div class="width-50"></div>
<div class="width-75"></div>
<div class="width-100"></div>
<div class="max-width-100"></div>高度
<div class="height-25"></div>
<div class="height-50"></div>
<div class="height-75"></div>
<div class="height-100"></div>
<div class="max-height-100"></div>边框盒
边框盒允许您仅添加内容、填充和边框，而不在宽度和高度 CSS 属性中添加边距。
<div class="border-box"></div>无边框
无边框允许您快速将任何元素的边框重置为 `none`。
<div class="callout primary border-none">
Hi! I am a callout with no Borders
</div>显示类
显示类允许您更改任何元素的显示属性。
<div class="display-inline"></div>
<div class="display-inline-block"></div>
<div class="display-block"></div>
<div class="display-table"></div>
<div class="display-table-cell"></div>这些涵盖了一些最常用的显示类型。 MDN 此处 指定了许多其他显示值。 如果您需要其中一些类，则可以使用 `$prototype-display` 通过 Sass 变量轻松添加它们。 Sass 参考 此处
- 对于 `display: flex`，请使用 `.flex-container`。 请参阅 [Flexbox 参考](flexbox.html)
- 对于 `display: none`，请使用 `.hide`。 或 Foundation 的 [可见性类](visibility.html)
定位
定位类可帮助您更改元素的位置值。 默认情况下，元素的位置值为 `static`。
<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-fixed"></div>
<div class="position-fixed-top"></div>
<div class="position-fixed-bottom"></div>
<div class="position-static"></div>定位：用作混合宏
position 混合宏可用于设置位置并同时设置 `top` `right` `bottom` 和/或 `left` 属性。
.foo {
@include position(fixed, 1, 2, 0, null);
}以上代码将生成以下输出
.foo {
position: fixed !important;
top: 1rem !important;
right: 2rem !important;
bottom: 0 !important;
}请参阅如何未打印 `left` 偏移量，因为此混合宏也接受 `null` 作为值。 Sass 参考 此处
溢出
这些溢出类可帮助您剪切内容、渲染滚动条或仅在其溢出块级容器时显示内容。
所有边
<div class="overflow-visible"></div>
<div class="overflow-hidden"></div>
<div class="overflow-scroll"></div>水平轴
<div class="overflow-x-visible"></div>
<div class="overflow-x-hidden"></div>
<div class="overflow-x-scroll"></div>垂直轴
<div class="overflow-y-visible"></div>
<div class="overflow-y-hidden"></div>
<div class="overflow-y-scroll"></div>注意：在 CSS 规范中，将 X 或 Y 方向上的 `overflow: hidden` 与相反方向上的 `overflow: visible` 组合使用无法按预期工作。 更多信息
Sass 混合宏助手
我们还提供了一些额外的实用程序混合宏，您可以在下一个原型项目中使用它们。
Box 混合宏
此混合宏可帮助您轻松创建正方形、矩形或圆形。 Sass 参考 此处
.foo {
@include box(1rem, 2rem); // Rectangle
}
.bar {
@include box(1rem); // Square
}
.baz {
@include box(1rem, $circle: true); // Circle
}Rotate 混合宏
这些 Rotate 混合宏允许您将元素旋转到某个角度。 顺时针是默认方向，但在度数前添加 `-` 将使其逆时针旋转。
.foo {
@include rotate(30); // 30 Degree
}
.bar {
@include rotateX(60); // 60 Degree on X axis
}
.baz {
@include rotateY(90); // 90 Degree on Y axis
}
.shaz {
@include rotateZ(120); // 120 Degree on Z axis
}关系混合宏（又名：nth:child 混合宏）
这些关系混合宏可帮助您通过简单的 Sass 混合宏管理 :nth-child 化元素的样式。
@include first($num) {} // applies style to first n children
@include first-child {} // applies style to first child only
@include last($num) {} // applies style to last n children
@include last-child {} // applies style to first child only
@include every($num) {} // applies style to every n children
@include first-last {} // applies style to first and last child only
@include after-first($num) {} // applies style to all after nth child
@include from-last($num) {} // applies style to all after and including nth child
@include from-first-last($num) {} // applies style to nth child from first child and last child
@include all-but($num) {} // applies style to all except nth child
@include all-but-first-last($num) {} // applies style all except first and last child
@include unique {} // applies style to a child who has no siblings
@include not-unique {} // applies style to all children except a child who has no siblings
@include between($first, $last) {} // applies style to all except first and last child
@include even {} // applies style to all even children
@include even-between($first, $last) {} // applies style to all even children except first and last
@include odd {} // applies style to all odd children
@include odd-between($first, $last) {} // applies style to all odd children except first and last
@include number-between($num, $first, $last) {} // applies style to every n children from first child and last childSass 参考
变量
可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$prototype-arrow-directions |
映射 | 下 |
包含所有 `arrow` 方向的映射 |
$prototype-arrow-size |
数字 | 0.4375rem |
箭头的宽度，默认为 `0.4375rem`。 |
$prototype-arrow-color |
颜色 | $black |
箭头的颜色，默认为 `$black`。 |
$prototype-border-box-breakpoints |
布尔值 | $global-prototype-breakpoints |
边框盒的响应断点。 |
$prototype-border-none-breakpoints |
布尔值 | $global-prototype-breakpoints |
无边框的响应断点。 |
$prototype-bordered-breakpoints |
布尔值 | $global-prototype-breakpoints |
带边框实用程序的响应断点。 |
$prototype-border-width |
数字 | rem-calc(1) |
`prototype-border-width` 的默认值 |
$prototype-border-type |
字符串 | solid |
`prototype-border-type` 的默认值 |
$prototype-border-color |
颜色 | $medium-gray |
`prototype-border-color` 的默认值，默认为 `medium-gray` |
$prototype-display-breakpoints |
布尔值 | $global-prototype-breakpoints |
显示类的响应断点 |
$prototype-display |
映射 | inline |
包含所有 `display` 类的映射 |
$prototype-font-breakpoints |
布尔值 | $global-prototype-breakpoints |
字体样式类型的响应断点 |
$prototype-wide-letter-spacing |
数字 | rem-calc(4) |
`font-wide` 的字母间距 |
$prototype-font-normal |
数字 | $global-weight-normal |
`font-normal` 的默认粗细，默认为 `global-weight-normal` |
$prototype-font-bold |
数字 | $global-weight-bold |
`font-bold` 的默认粗细，默认为 `global-weight-bold` |
$prototype-list-breakpoints |
布尔值 | $global-prototype-breakpoints |
列表样式类型的响应断点 |
$prototype-style-type-unordered |
映射 | disc |
包含所有 `style-type-unordered` 类的映射 |
$prototype-style-type-ordered |
映射 | decimal |
包含所有 `style-type-ordered` 类的映射 |
$prototype-overflow-breakpoints |
布尔值 | $global-prototype-breakpoints |
溢出辅助类的响应断点 |
$prototype-overflow |
映射 | visible |
包含所有 `overflow` 类的映射 |
$prototype-position-breakpoints |
布尔值 | $global-prototype-breakpoints |
位置辅助类的响应断点 |
$prototype-position |
映射 | static |
包含所有 `position` 类的映射 |
$prototype-position-z-index |
数字 | 975 |
固定定位的 z-index |
$prototype-rounded-breakpoints |
布尔值 | $global-prototype-breakpoints |
圆角实用程序的响应断点。 |
$prototype-border-radius |
数字 | rem-calc(3) |
`prototype-border-radius` 的默认值 |
$prototype-separator-breakpoints |
布尔值 | $global-prototype-breakpoints |
分隔符的响应断点。 |
$prototype-separator-align |
字符串 | center |
分隔符的默认对齐方式。 |
$prototype-separator-height |
数字 | rem-calc(2) |
分隔符的高度。 |
$prototype-separator-width |
数字 | 3rem |
分隔符的宽度。 |
$prototype-separator-background |
颜色 | $primary-color |
分隔符的默认颜色。 |
$prototype-separator-margin-top |
数字 | $global-margin |
分隔符的上边距。 |
$prototype-shadow-breakpoints |
布尔值 | $global-prototype-breakpoints |
阴影实用程序的响应断点。 |
$prototype-box-shadow |
数字 | 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) |
`prototype-box-shadow` 的默认值 |
$prototype-sizing-breakpoints |
布尔值 | $global-prototype-breakpoints |
间距类（边距和填充）的响应断点 |
$prototype-sizing |
映射 | width |
包含所有 `sizing` 类的映射 |
$prototype-sizes |
映射 |
25: 25% |
包含所有尺寸的映射。 |
$prototype-spacing-breakpoints |
布尔值 | $global-prototype-breakpoints |
间距类（边距和填充）的响应断点 |
$prototype-spacers-count |
数字 | 3 |
默认间隔计数器数量（边距和填充） |
$prototype-decoration-breakpoints |
布尔值 | $global-prototype-breakpoints |
文本装饰类的响应断点 |
$prototype-text-decoration |
映射 | overline |
包含所有 `text-decoration` 类的映射 |
$prototype-transformation-breakpoints |
布尔值 | $global-prototype-breakpoints |
文本转换类的响应断点 |
$prototype-text-transformation |
映射 | lowercase |
包含所有 `text-transformation` 类的映射 |
$prototype-utilities-breakpoints |
布尔值 | $global-prototype-breakpoints |
文本实用程序的响应断点 |
$prototype-text-overflow |
字符串 | ellipsis |
`text-overflow` 变量的默认值 |
混合宏
我们使用这些 mixin 来构建此组件的最终 CSS 输出。您可以自己使用 mixin 从我们的组件中构建自己的类结构。
border-box
@include border-box;边框盒实用程序
border-none
@include border-none;无边框实用程序
bordered
@include bordered($width, $type, $color);带边框的实用程序：默认情况下为元素添加一个浅色边框。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$width |
数字 | $prototype-border-width |
边框宽度 |
$type |
字符串 | $prototype-border-type |
边框类型 |
$color |
颜色 | $prototype-border-color |
边框颜色 |
box
@include box($width, $height, $circle);Box Mixin：轻松创建正方形、矩形或圆形
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$width |
数字 | 无 |
盒子的宽度 |
$height |
数字 | $width |
盒子的高度，默认为 |
$circle |
布尔值 | false |
使盒子成为一个圆形，默认情况下为 |
display
@include display($display);显示类，默认通过映射 $prototype-display 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$display |
字符串 | 无 |
显示类 |
font-wide
@include font-wide($letter-spacing);字体宽字母间距！
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$letter-spacing |
数字 | $prototype-wide-letter-spacing |
字体的宽字母间距 |
font-normal
@include font-normal($weight);字体粗细正常，默认值通过 global-weight-normal 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$weight |
数字 | $prototype-font-normal |
字体的粗细（正常） |
font-bold
@include font-bold($weight);字体粗细粗体，默认值通过 global-weight-bold 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$weight |
数字 | $prototype-font-bold |
字体的粗细（粗体） |
font-italic
@include font-italic;字体样式斜体
style-type-unordered
@include style-type-unordered($style-type-unordered);无序列表的样式类型，默认通过映射 $prototype-style-type-unordered 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$style-type-unordered |
字符串 | 无 |
无序列表的样式类型 |
style-type-ordered
@include style-type-ordered($style-type-ordered);有序列表的样式类型，默认通过映射 $prototype-style-type-ordered 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$style-type-ordered |
字符串 | 无 |
有序列表的样式类型 |
overflow
@include overflow($overflow);溢出类，默认通过映射 $prototype-overflow 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$overflow |
字符串 | 无 |
溢出类 |
overflow-x
@include overflow-x($overflow);水平轴上的溢出类，默认通过映射 $prototype-overflow 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$overflow |
字符串 | 无 |
溢出类（水平轴） |
overflow-y
@include overflow-y($overflow);垂直轴上的溢出类，默认通过映射 $prototype-overflow 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$overflow |
字符串 | 无 |
溢出类（垂直轴） |
position
@include position($position, $top, $right, $bottom, $left);定位类，默认通过映射 $prototype-position 传递，而所有偏移值都乘以 $global-position，默认情况下等于 1rem。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$position |
字符串 | 无 |
定位类，可以是 |
$top |
数字 | null |
顶部偏移量 |
$right |
数字 | null |
右侧偏移量 |
$bottom |
数字 | null |
底部偏移量 |
$left |
数字 | null |
左侧偏移量 |
position-fixed-top
@include position-fixed-top($z-index);定位固定在顶部角落
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$z-index |
数字 | $prototype-position-z-index |
|
position-fixed-bottom
@include position-fixed-bottom($z-index);定位固定在底部角落
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$z-index |
数字 | $prototype-position-z-index |
|
rotate
@include rotate($deg);旋转 Mixin：将元素旋转到某个角度
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$deg |
数字 | 无 |
旋转角度 |
rotateX
@include rotateX($deg);RotateX Mixin：将元素绕 X 轴旋转到某个角度
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$deg |
数字 | 无 |
旋转角度 |
rotateY
@include rotateY($deg);RotateY Mixin：将元素绕 Y 轴旋转到某个角度
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$deg |
数字 | 无 |
旋转角度 |
rotateZ
@include rotateZ($deg);RotateZ Mixin：将元素绕 Z 轴旋转到某个角度
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$deg |
数字 | 无 |
旋转角度 |
border-radius
@include border-radius($radius);圆角实用程序（所有角落）：默认情况下为元素添加圆角（所有角落）。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$radius |
数字 | $prototype-border-radius |
边框半径（所有角落） |
border-rounded
@include border-rounded;圆形正方形实用程序或矩形实用程序（所有角落）：默认情况下将元素的所有角落都变成圆角，以形成药丸形状。
separator
@include separator($align, $height, $width, $background, $top);标题分隔符实用程序，主要用于设置节标题的样式
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$align |
字符串 | $prototype-separator-align |
分隔符对齐方式 |
$height |
数字 | $prototype-separator-height |
宽度 |
$width |
数字 | $prototype-separator-width |
高度 |
$background |
颜色 | $prototype-separator-background |
背景 |
$top |
数字 | $prototype-separator-margin-top |
上边距 |
shadow
@include shadow($shadow);阴影实用程序：默认情况下为元素添加一个浅色阴影。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$shadow |
数字 | $prototype-box-shadow |
组件的阴影 |
max-width-100
@include max-width-100;最大宽度 100 实用程序。
max-height-100
@include max-height-100;最大高度 100 实用程序。
margin
@include margin($top, $right, $bottom, $left);边距辅助 mixin，所有值都乘以 $global-margin，默认情况下等于 1rem
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$top |
数字 | null |
上边距 |
$right |
数字 | null |
右边距 |
$bottom |
数字 | null |
下边距 |
$left |
数字 | null |
左边距 |
padding
@include padding($top, $right, $bottom, $left);填充辅助 mixin，所有值都乘以 $global-padding，默认情况下等于 1rem
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$top |
数字 | null |
上边距 |
$right |
数字 | null |
右边距 |
$bottom |
数字 | null |
下边距 |
$left |
数字 | null |
左边距 |
margin-direction
@include margin-direction($dir, $spacer);特定方向属性的边距类
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$dir |
字符串 | 无 |
方向 |
$spacer |
数字 | 无 |
间隔符 |
padding-direction
@include padding-direction($dir, $spacer);特定方向属性的填充类
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$dir |
字符串 | 无 |
方向 |
$spacer |
数字 | 无 |
间隔符 |
text-decoration
@include text-decoration($decoration);文本装饰，默认通过映射 $prototype-text-decoration 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$decoration |
字符串 | 无 |
文本装饰 |
text-transform
@include text-transform($transformation);文本转换，默认通过映射 $prototype-text-transformation 传递
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$transformation |
字符串 | 无 |
文本转换 |
text-hide
@include text-hide;图像替换实用程序。text-hide
text-truncate
@include text-truncate($overflow);截断文本，默认使用省略号。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$overflow |
字符串 | $prototype-text-overflow |
文本截断 |
text-nowrap
@include text-nowrap;不换行文本。text-nowrap
text-wrap
@include text-wrap;换行文本。text-wrap
first
@include first($num) { }从第一个到 $num 选择所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
子元素总数的前 |
first-child
@include first-child { }选择第一个确切的子元素
last
@include last($num) { }从最后一个到 $num 选择所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
子元素总数的最后 |
last-child
@include last-child { }选择最后一个确切的子元素
every
@include every($num) { }每 $num 个子元素选择一次。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
所有子元素中的每 |
first-last
@include first-last { }仅选择第一个和最后一个子元素。
after-first
@include after-first($num) { }从第一个到 $num 选择后面的所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
子元素总数的前 |
from-last
@include from-last($num) { }从最后一个开始选择 $num 个子元素之前的子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
从最后一个开始的 |
from-first-last
@include from-first-last($num) { }从第一个开始选择第 $num 个子元素，从最后一个开始选择第 $num 个子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
从第一个和最后一个开始调用的第 |
all-but
@include all-but($num) { }选择除 $num 之外的所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
应从所有其他子元素中排除的第 |
all-but-first-last
@include all-but-first-last($num) { }选择前 $num 个和后 $num 个之间的所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
从第一个和最后一个开始排除的第 |
unique
@include unique { }仅在子元素唯一时才选择它。这意味着如果至少有 2 个子元素，则不会应用该样式。
not-unique
@include not-unique { }仅在子元素不唯一时才选择它们。这意味着如果至少有 2 个子元素，则将应用该样式。
between
@include between($first, $last) { }选择 $first 和 $last 之间的所有子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$first |
数字 | 无 |
第一个 |
$last |
数字 | 无 |
最后一个 |
even
@include even { }选择所有偶数子元素。
even-between
@include even-between($first, $last) { }选择 $first 和 $last 之间的所有偶数子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$first |
数字 | 无 |
第一个 |
$last |
数字 | 无 |
最后一个 |
odd
@include odd { }选择所有奇数子元素。
odd-between
@include odd-between($first, $last) { }选择 $first 和 $last 之间的所有奇数子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$first |
数字 | 无 |
第一个 |
$last |
数字 | 无 |
最后一个 |
number-between
@include number-between($num, $first, $last) { }选择 $first 和 $last 之间的所有 $num 个子元素。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$num |
数字 | 无 |
|
$first |
数字 | 无 |
第一个 |
$last |
数字 | 无 |
最后一个 |