Breadcrumb:导航路径

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在页面上显示用户在网站上的位置 .. 可以使用了一个 Breadbrumb,也就是导航路径组件 .. 一个导航路径组件可以使用一个 nav 标签包装一下 .. 里面是一个有序列表,列表上面要添加一个 breadcrumb 这个类 ..

列表项目上要添加一个 breadcrumb-item 类 .. 列表里面的每个项目就是网站上的一个位置 .. 所以可以是一个链接 .. 这个项目是 首页 .. 再添加两个项目 .. 这个是课程 .. 最后这个是 Bootstrap ..

一般导航路径里面的最后一个项目就是用户当前在网站上所在的位置 .. 所以它不是一个链接 .. 当前项目上面要再添加一个 active 类 ..

现在页面上显示的就是一个 Breadcrumb 组件 ... 每个项目中间会用一个斜线分隔开 .. 这个斜线样式用在了一个伪元素上了 ..

可以使用开发者工具检查一下 .. 在元素这里,找到导航路径里面的第二个项目 .. 打开它 .. 你会看到它里面有人上 before ,这就是一个 伪元素 ,

在这个 before 伪元素上应用的样式这里,有个 content,对应值是一个斜线,这个就是你在界面上看到的那个斜线 .. 我们可以试一下,把这个斜线换成一个 # 号 .. 现在导航路径的项目会用这个 # 号分隔开 ...

Breadcrumb:导航路径《 Bootstrap 4:界面组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点