• 面包屑导航(Breadcrumb)
    • 概览
    • 更改分隔符
    • 无障碍处理

    面包屑导航(Breadcrumb)

    在通过BootStrap的内置CSS样式,自动添加分隔符、并呈现导航层次和网页结构结构,从而指示当前页面的位置为访客创造优秀用户体验。

    概览

    分隔符号是通过::beforecontent两个方法定义添加的。

    面包屑导航(Breadcrumb)  - 图1

    1. <nav aria-label="breadcrumb">
    2. <ol class="breadcrumb">
    3. <li class="breadcrumb-item active" aria-current="page">Home</li>
    4. </ol>
    5. </nav>
    6. <nav aria-label="breadcrumb">
    7. <ol class="breadcrumb">
    8. <li class="breadcrumb-item"><a href="#">Home</a></li>
    9. <li class="breadcrumb-item active" aria-current="page">Library</li>
    10. </ol>
    11. </nav>
    12. <nav aria-label="breadcrumb">
    13. <ol class="breadcrumb">
    14. <li class="breadcrumb-item"><a href="#">Home</a></li>
    15. <li class="breadcrumb-item"><a href="#">Library</a></li>
    16. <li class="breadcrumb-item active" aria-current="page">Data</li>
    17. </ol>
    18. </nav>

    更改分隔符

    分隔符通过::before和自动添加到CSS中content。他们可以通过改变来改变$breadcrumb-divider。该报价是需要函数生成围绕一个字符串的报价,所以如果你想>为分隔符,你可以这样做:

    1. $breadcrumb-divider: quote(">");

    也可以使用base64嵌入式SVG图标:

    1. $breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

    分隔符可以通过设置$breadcrumb-dividernone

    1. $breadcrumb-divider: none;

    无障碍处理

    为了为障碍浏览提供方便,针对面包屑这样具备导航功能的模块,建议添加一个有意义的标签即aria-label="breadcrumb"來描述<nav>元素,以及使用 aria-current="page"到这组导航的最后一个项目,以标明当前页面名称(路径)

    更多信息,敬请参阅 WAI-ARIA Authoring Practices for the breadcrumb pattern(面包屑导航的无障碍研究)。