传统导航栏的页面结构,它不能展示出当前页在导航层次结构中的位置。为此,Bootstrap提出面包屑导航,通过为导航层次结构自动添加分隔符,展示出当前页在导航层次结构中的位置。
下面通过一个案例演示面包屑导航的实现方式。在chapterO1文件夹下创建名称为bootstrap03的HTML.文件,用于设计一个面包屑导航栏,具体代码如下所示。
bootstrap03
在文件1-20中,第5行代码引入bootstrap.mincss文件;第914行代码定义标签,并设置aria-label属性值为breadcnumb,表示面包屑导航。其中,第10行代码在nav标签下定义类名为breadenumb的有序列表;第1l行代码在标签下定义类名为breadenumb-item的标签表示首页链接,第l2行代码在标签下定义了类名为breadenuml-item 的标签表示简介链接。运行结果如下图。
Copyright © 2013-2021 河南云和数据信息技术有限公司 豫ICP备14003305号 ISP经营许可证:豫B-20160281