Bootstrap系列之面包屑导航(Breadcrumb)
文章の目录
- 1、示例
- 2、改变分隔符
- 3、可访问性
- 写在最后
面包屑导航(Breadcrumb)用于指示当前页面在导航层级中的位置,并通过 CSS 为各导航条目之间自动添加分隔符。
1、示例
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol>
</nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>
2、改变分隔符
分隔符是通过 CSS 的 ::before
和 content
两个属性自动添加的。可以通过 $breadcrumb-divider
变量来改变分隔符。Sass 中的 quote 函数用于生成字符串两侧的引号,因此,如果你希望用 > 字符作为分隔符的话,你可以这样做:
$breadcrumb-divider: quote(">");
也可以使用 经过 base64 编码的嵌入式 SVG 图标:
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
通过将 $breadcrumb-divider
设置为 none,从而删除分隔符:
$breadcrumb-divider: none;
3、可访问性
由于面包屑导航(breadcrumb)组件提供了导航功能,因此,最好添加一个有意义的标签(例如 aria-label="breadcrumb"
)来描述 <nav>
元素中提供的导航的类型,并且为最后一个条目添加 aria-current="page"
以表示其代表的是当前页面。
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//
,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L;~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!
Bootstrap系列之面包屑导航(Breadcrumb)相关推荐
- bootstrap框架之面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置 Bootstrap 中的面包屑导航(B ...
- 一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...
- Bootstrap—面包屑导航breadcrumb
什么是面包屑导航,先来看一下效果: 面包屑导航是具有层次结构的一种显示方式,bootrap中通过 .breadcrumb class 的无序列表实现面包屑导航效果,代码如下: <!DOCTYPE ...
- Bootstrap 面包屑导航(Breadcrumb)
一.Bootstrap 面包屑导航 1.1 面包屑导航css 面包屑导航是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置,是 ...
- 15. 徽章 和 面包屑导航
1.徽章 (Badge) <!--dabge 是基类 badge-* 可调颜色 --> <!--dabge 是基类 badge-* 可调颜色 --> <h1>zsp ...
- Laravel Breadcrumbs 自动面包屑导航
说明 laravel-breadcrumbs 可为你的 Laravel 项目快速定制拥有 Bootstrap 风格的面包屑导航. 本文章由 The EST Group 成员 @Kelvin 撰写, 首 ...
- bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
- Bootstrap 面包屑导航
面包屑导航 面包屑导航(Bread Crumbs Navigation)是一种辅助和补充的导航方式,非常适合展示站点的层级关系,能帮助用户明确当前所处的位置,并方便地提供返回的路径. Bootstra ...
- Bootstrap面包屑导航
Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...
- css面包屑导航_在CSS3中编写优美的面包屑导航菜单
本文是我们的" HTML5 / CSS3教程系列"的一部分 -致力于帮助您成为更好的设计师和/或开发人员. 单击此处查看同一系列的更多文章. 导航菜单和链接可能是Web布局中最重要 ...
最新文章
- Leetcode——300. 最长上升子序列
- LeetCode 288. 单词的唯一缩写(哈希)
- 做数据产品经理要学习那些东西?
- HTML5新增标签 0303
- 解决python中 .to_csv() 的乱码问题
- sublime text插件emmet自定义模板
- armbian安装图形桌面_archlinux / parabola 图形用户界面安装教程
- 女人离婚后不要孩子,你怎么看?
- 【python练习题01】字符串格式化输出
- 51单片机DHT11温湿度传感器
- utf-8 html转chm,把ANSI格式的TXT文件批量转换成UTF-8文件类型
- 最全互联网Linux工作规划!
- python如何从键盘输入数据_python如何从键盘输入数据?
- Linux系统和程序中的DEP和ASLR保护机制
- 自定义Drawable实现灵动的红鲤鱼动画(下篇)
- mac电脑上遇到的坑,持续更新...
- NOTA-PEG-Lys/CS/HRP/MMPs大环配体-聚乙二醇-溶菌酶/硫酸软骨素/辣根过氧化氢酶/基质金属蛋白酶
- 海外SDK之----------韩国支付onestore
- 设计模式之—— 桥接模式 Bridge
- 初级健身者在家如何健身