面包屑

如果这是你第一次听说“面包屑”这个词在网页设计中使用，让我向你展示它是什么样子的:

我很确定你在访问过的网站上遇到过。现在，让我们在你的网站上添加一个。要添加面包屑元素，只需在元素面板上搜索“面包屑”并将面包屑元素拖到内容窗格。

你会看到这样的东西:

现在，您在Cornerstone中看到的文本并不是将出现在站点前端的实际文本。这只是一个占位符。在前端，您将看到网页的层次结构，从链接到首页在最左边，然后把一个孩子移到右边。

在本例中，由于我们创建的页面是Company Profile，在本例中是About Us页面的子页面，因澳门188bet娱乐此结构为:>公司简介澳门188bet娱乐．

面包屑路径设置

下设置字段组，您将看到以下字段:

Home标签类型

您可以选择是否使用纯文本(例如。首页)下载主页链接，或以图标代替。

国内标签

如果你选择了文本在上面的Home Label Type字段中，你可以将文本从“Home”改为其他内容(例如:博客，新闻)．

如果你愿意图标，你可以选择要使用的图标。

宽度＆最大宽度

您可以设置Breadcrumb元素的默认宽度。您还可以设置它的最大宽度，使它不能超过该宽度。

的理由＆方向

这可以让你改变集合Flex CSSBreadcrumb元素的属性。如果您不熟悉Flexbox，这里有一个有用的介绍在这里．

背景

您可以为元素添加背景颜色。

Breadcrumb设计设置

你可以设置breadcrumb Element的字体、边距、填充、框阴影、边框和边框半径。你会看到这些控制面板上的非常属性:

请注意，这些属性在配置时是针对整个Breadcrumb元素的，而不是针对所述元素中的单个链接。这意味着，如果你设置填充，它将适用于整个元素。

稍后我们将讨论如何配置个人面包屑内的链接。

Breadcrumb分隔符设置

在面包屑中，“分隔符”是每个链接的分隔符。

默认的分隔符是一个箭头，但我们可以更改它，甚至完全删除它。设置可以在字段设置场集团。

现在让我们讨论单个设置。

启用

默认情况下，分隔符是打开的在但是你可以转动它从，从而删除任何分隔符。

分隔符类型

就像在Home标签类型下设置字段组，您可以选择是否使用文本或图标作为分隔符类型。当我们说“文本”时，它并不一定指文字，尽管文字是允许的。一般使用的是什么ASCII码．默认分隔符，＆rarr;是一个ASCII码，它生成箭头。

如果你愿意图标作为分隔符类型，您将看到图标选择器字段，以选择您想使用的图标。

当你＆RTL分隔符

当你意思是“从左到右”RTL意思是“从右向左”。它们基本上指的是我们读字母的方向。例如，你从左到右阅读这篇文章，因此，这是LTR。像阿拉伯语和希伯来语这样的语言从右到左阅读他们的字符和单词。

一些网站同时支持LTR和RTL的多种语言。此设置不仅允许您设置LTR分隔符，还允许您设置启用RTL时使用的内容，从而为breadcrumb分隔符做好准备。

间距

您在这里输入的值将被设置为分隔符左右两侧的距离。所以如果你设置10 px作为值，每个分隔符的左边和右边分别有10px的空间。

Breadcrumb Links设置

链接设置实际上与设置而且设计设置的总和。主要的区别在于链接设置特定于单个链接，而前两个应用于Breadcrumb元素本身。

的链接设置允许您还设置文本颜色和背景颜色的所有链接在面包屑内的鼠标悬停在一个链接。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看面包屑元素的现场演示，请单击在这里．

总结

在短短几分钟内，您已经学习了如何在基石中添加和设置面包屑。您已经学习了如何设计Breadcrumb Element及其各个链接。最后，您还学习了如何根据自己的喜好配置分隔符。