Breadcrumb 所在位置
基本用法
面包屑用于本页面定位，让用户知道本页面在整个系统中所处的相对位置；使用ax-breadcrumb类包裹，ax-gutter类作为分隔符。
<div class="ax-breadcrumb"><a href="###">首页</a><i class="ax-gutter">/</i><a href="###" >产品列表</a><i class="ax-gutter">/</i><span>产品详情</span></div>
使用其他分隔符
对ax-gutter分隔符追加ax-code或者ax-iconfont可使用不同风格的分隔符。请观摩效果演示。
<div class="ax-breadcrumb"><a href="###">首页</a><i class="ax-gutter">-</i><a href="###" >产品列表</a><i class="ax-gutter">-</i><span>产品详情</span></div>
<div class="ax-breadcrumb"><a href="###">首页</a><i class="ax-gutter ax-code">›</i><a href="###" >产品列表</a><i class="ax-gutter ax-code">›</i><span>产品详情</span></div>
<div class="ax-breadcrumb"><a href="###">首页</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><a href="###" >产品列表</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><span>产品详情</span></div>
使用图标
用户根据需要可添加字体图标，请观摩演示效果。
<div class="ax-breadcrumb"><span class="ax-title ax-iconfont ax-icon-pin"></span><a href="###">首页</a><i class="ax-gutter">/</i><a href="###" >产品列表</a><i class="ax-gutter">/</i><span>产品详情</span></div>
<div class="ax-breadcrumb"><span class="ax-title">所在位置：</span><a href="###" class="ax-iconfont ax-icon-home"></a><i class="ax-gutter ax-iconfont ax-icon-right"></i><a href="###" >产品列表</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><span>产品详情</span></div>
<div class="ax-breadcrumb"><span class="ax-title">所在位置：</span><a href="###">首页</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><a href="###" ><i class="ax-iconfont ax-icon-cart"></i>产品列表</a><i class="ax-gutter ax-iconfont ax-icon-right"></i><span><i class="ax-iconfont ax-icon-link"></i>产品详情</span></div>