面包屑导航(BreadcrumbNavigation)
这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
适用范围:
1、层级较深的网站。面包屑导航适合层级较深的网站,如果只有一级分类的话,通过主导航就可以起到快速定位的作用。扁平构架的网站就没有使用面包屑导航。
2、独立不交叉的网站结构,由于面包屑网站导航路径是线性结构的,因此网站内容必须划分的非常清晰,且不存在交叉。
<section id="breadcrumbs">
<!--下面是一个简单的案例,他可以展示在多个页面上,用以页面之间的跳转。-->
<div class="bs-docs-example">
<ul class="breadcrumb">
<li class="active">首页</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">首页</a> <span class="divider">/</span></li>
<li class="active">Library</li>
</ul>
<ul class="breadcrumb" style="margin-bottom: 5px;">
<li><a href="#">首页</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
</div>
</section>
http://v2.bootcss.com/components.html#breadcrumbs
分享到:
相关推荐
1. **导航**:包括导航条(Navbar)、导航 pills、面包屑(Breadcrumbs)、页脚(Footer)等,这些元素在网站结构中起着重要的引导作用。 2. **按钮和按钮组**:提供不同大小、颜色和样式的按钮,以及按钮组...
3. **清晰的导航结构**:包含了面包屑导航、侧边栏菜单和顶部导航栏,便于用户在复杂的后台系统中快速定位。 4. **定制化组件**:包括表格、卡片、模态框、进度条、轮播等,满足各种常见的后台功能需求。 5. **...
- Bootstrap的组件包括栅格系统、排版、头部、导航(例如导航栏、面包屑、分页)、表单、按钮、警告、图片、媒体对象、模态框、工具提示、弹出框、滚动spy等。这些组件在`docs/`目录下的文档中都有详细说明。 5. *...
- 组件样式:包括警告、页眉、页脚、导航条、面包屑、媒体对象等。 2. JavaScript 插件: Bootstrap 3.3.0 包含多个基于jQuery的插件,这些插件增强了用户体验和交互性: - 轮播(Carousel):用于创建滑动图片...
2. **导航**:如导航栏(Navbar)、面包屑导航(Breadcrumbs)、侧边栏(Sidebar)等,这些帮助用户在多层级的后台系统中导航。 3. **表单组件**:如输入框、选择器、下拉菜单、复选框、单选按钮等,用于数据输入和...
Bootstrap 3.3.2提供了丰富的UI组件,包括导航栏(Navbar)、按钮(Buttons)、按钮组(Button Groups)、表单(Forms)、输入框(Input Groups)、表(Tables)、警告提示(Alerts)、进度条(Progress Bars)、...
1. **导航**:包括导航栏(navbar)、面包屑(breadcrumb)、页脚(footer)、侧边栏(sidebar)等,为网站提供清晰的导航结构。 2. **容器**:主要有.container、.container-fluid两种,用于包裹内容,控制页面宽度...
在导航方面,Bootstrap有多种导航组件,如导航栏(navbar)、面包屑(breadcrumb)、标签页(tabbed navigation)、分页(pagination)。这些组件都设计得易于使用和自定义,能帮助用户在网站或应用中轻松导航。 ...
这个模板的特点在于其丰富的控件和布局设计,它内置了多种常见的Web元素,如图表、表格、模态框、导航条、面包屑导航、下拉菜单等。这些元素都经过精心设计,符合现代网页的审美标准,且易于定制和扩展。开发者可以...
11. **导航**: 包括导航条(Navbar)、面包屑(Breadcrumbs)、分页(Pagination)、标签页(Tab)和模态框(Modal)等,提供了导航功能和用户交互。 12. **JavaScript事件和方法**: 每个JavaScript插件都有一套...
2. **丰富的组件**:包含导航栏、面包屑导航、模态框、轮播图、表格、图表、按钮组、下拉菜单、表单元素等多种常见的UI组件,满足不同场景下的需求。 3. **页面布局**:提供多种页面布局选项,如固定顶部、固定侧...
2. **预定义组件**:包括下拉菜单、模态框、按钮组、导航条、面包屑导航、分页、警告提示等,这些都经过精心设计和优化,可以直接在项目中使用,减少开发者的工作量。 3. **图表集成**:Quirk可能集成了像Chart.js...
1. **导航**:包括侧边栏导航、顶部导航、面包屑导航等,方便用户在后台系统中进行页面间的跳转。 2. **图标库**:内含多种矢量图标,如Font Awesome、Simple Line Icons和Flags,为界面增添视觉吸引力。 3. **表单...
4. **导航**:Bootstrap 3提供了多种导航组件,如导航条(Navbar)、面包屑(Breadcrumbs)、页脚(Footer)、分页(Pagination)、标签页(Tabbed navigation)等,方便构建导航结构。 5. **表单**:预设的表单...
3. **导航(Navigation)**:此部分可能包括导航栏(Navbars)、面包屑(Breadcrumbs)、侧边栏(Sidebar)、分页(Pagination)等。Bootstrap的导航组件帮助用户轻松浏览网站内容,特别是在移动设备上。 4. **表单.Forms**:...
4. **导航和布局**:Bootstrap提供了多种导航组件,如导航条(navbars)、面包屑(breadcrumbs)、分页(pagination)、标签页(tabs)等,帮助组织网站的结构和导航。"bootstrap-demo"可能包含了这些组件的示例代码...
5. **导航**:包含导航条(`.navbar`)、面包屑导航(`.breadcrumb`)、 pills 和 tabs 导航(`.nav-pills`,`.nav-tabs`),这些都是创建用户导航的便捷工具。 6. **模态框**(`.modal`):允许在不离开当前页面的...
3. **组件**:Bootstrap 3包含多种可重用的组件,如导航栏、模态框、下拉菜单、轮播图、分页器、面包屑导航、警告框和面板等。这些组件大大简化了网页设计的复杂性。 4. **JavaScript插件**:Bootstrap 3附带了一些...
6. **Bootstrap菜单和导航**:Bootstrap提供了预定义的导航组件,如导航条、面包屑导航等,它们易于定制且响应式,确保在各种设备上都能方便地导航。 7. **灰色调**:灰色作为主色调,可能创造出专业、低调或运动的...
导航组件是Bootstrap中的另一个重要部分,包括导航栏(.navbar)、面包屑(.breadcrumb)、 pills 和 tabs。这些组件都具有响应式行为,可以轻松地在不同设备上展示。在"bootstrap4-basic-playground"中,你可以看到...