Bootstarp 4 入门之面包屑

bootstrap 面包屑

指示当前页面在导航层次结构中的位置,该层次结构会通过CSS自动添加分隔符。
语法

父元素增加,breadcrumb
子导航使用 breadcrumb-item
选中的加使用  active

描述

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>
<div class="breadcrumb">
    <div class="breadcrumb-item"><a href="">Home</a></div>
    <div class="breadcrumb-item active">About</div>
</div>

breadcrumb 使用了 flex 盒子布局 ,并设置了 运行跨行 flex-wrap: wrap

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。