目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

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

概观

分隔符通过::beforecontent自动添加到CSS中。

<nav aria-label="breadcrumb" role="navigation">  <ol class="breadcrumb">    <li class="breadcrumb-item active" aria-current="page">Home</li>  </ol></nav><nav aria-label="breadcrumb" role="navigation">  <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" role="navigation">  <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>

无障碍

由于breadcrumbs提供导航,因此最好添加一个有意义的标签,例如aria-label="breadcrumb"描述<nav>元素中提供的导航类型,并将该元素应用于aria-current="page"该集合的最后一项,以表示它代表当前页面。

有关更多信息,请参阅 breadcrumb模式WAI-ARIA创作实践。

上一篇:下一篇: