Bootstrap学习：面包屑导航

最新推荐文章于 2025-05-18 19:27:14 发布
转载 最新推荐文章于 2025-05-18 19:27:14 发布 · 2.8k 阅读 · 1
文章标签：

#bootstrap #web框架 #结构

本文介绍如何使用Bootstrap创建面包屑导航，这是一种简洁的导航组件，用于显示用户在网站层级结构中的当前位置。文章提供了一个完整的示例代码，展示了如何利用Bootstrap CSS类实现面包屑样式。

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

<code class="hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.breadcrumb</span> > <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span> + <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">li</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:before</span> <span class="hljs-rules" style="box-sizing: border-box;">{
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-hexcolor" style="box-sizing: border-box;">#CCCCCC</span></span></span>;
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">content</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/ "</span></span></span>;
    <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"> <span class="hljs-number" style="box-sizing: border-box;">0</span> <span class="hljs-number" style="box-sizing: border-box;">5</span>px</span></span>;
<span class="hljs-rule" style="box-sizing: border-box;">}</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

下面的实例演示了面包屑导航：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
   <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>Bootstrap 实例 - 面包屑导航<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
   <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">link</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/bootstrap/css/bootstrap.min.css"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">rel</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"stylesheet"</span>></span>
   <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/scripts/jquery.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
   <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"/bootstrap/js/bootstrap.min.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ol</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"breadcrumb"</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#"</span>></span>Home<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">href</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#"</span>></span>2013<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">a</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
  <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"active"</span>></span>十一月<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">li</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ol</span>></span>


<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

结果如下所示： 
这里写图片描述

Bootstrap 面包屑导航（Breadcrumbs）
shengyin714959的博客
08-14 461
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有class 的无序列表。
Bootstrap4 面包屑导航（Breadcrumb）
shengyin714959的博客
08-18 633
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有class 的无序列表。
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
10-19
主要介绍了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法,涉及js数据传输及定义响应事件相关操作技巧,需要的朋友可以参考下
Bootstrap 实例 - 面包屑导航
shilianweiyao的专栏
04-11 1647
.breadcrumb>li+li:before {      padding: 0 5px;      color: #ccc;      content: "/\00a0"; }
intellij idea 面包屑导航 默认展示
wangjun5159的专栏
05-15 4014
前言 intellij idea 面包屑导航太好用了，查看当前行代码是哪个方法一目了然；以下是显示面包屑导航的方法 某文件单独设置 View---->Active Editor---->Show Breadcrumbs 全局设置 File---->Settings—>Editor---->General—>Breadcrumbs—>勾选目标文件类型，选择顶部还是底部展示 ...
BootStrap学习笔记之nav导航栏和面包屑导航
01-19
nav导航栏 <div class=container-fluid></div> <a> 大大的logo <li> <a> 分类 </a> <li> <a> 分类 </
前端领域中Bootstrap的面包屑导航动画
最新发布
小白菜的博客
05-18 542
本文旨在全面介绍如何在Bootstrap框架中实现具有动画效果的面包屑导航。我们将覆盖从基础实现到高级动画效果的全套解决方案，包括CSS过渡、JavaScript交互以及响应式设计考虑。文章将从面包屑导航的基本概念开始，逐步深入到动画实现技术，最后提供实际应用案例和性能优化建议。面包屑导航(Breadcrumb): 一种辅助导航方式，显示用户在网站或应用中的当前位置路径CSS过渡(Transition): 属性变化时的平滑动画效果关键帧动画(Keyframe Animation)
Bootstrap组件学习之导航、标签、面包屑导航(精品)
12-28
Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <!-- <link rel=stylesheet &gt...
掌握Bootstrap导航组件：面包屑与下拉菜单实例
面包屑导航是一种呈现网站层级结构的方式，用户可以看到他们当前页面在整个网站结构中的位置。在Bootstrap中，通过`.nav`类结合`.nav-tabs`样式来创建这种导航形式。HTML结构通常是这样的： ```html <li><a href=...
利用Bootstrap的面包屑组件实现面包屑层次分级导航效果
昊虹AI笔记
10-21 1341
Bootstrap实现面包屑层次分级导航效果
蓝色网站导航源码！div+css样式导航条！
06-20
html源码标签，div+css导航条源码，www.020fphs.com网址的更新导航！div+css教程使用！
白狐影视导航系统
02-03
白狐影视导航系统,请把admin目录名改为你的后台目录名.
电影网址导航
04-06
哇塞电影网址大全，吸取了以往各种导航网址程序的优点，最大程度的完善优化了各项功能和指标，采用谁对我站贡献大，我站也给予他宣传和展示的机会就越多的流量交换模式，只要您在本系统注册登记您的网址，然后在你网站做好我站连接或是挂上流量互换代码，每次您网站有用户访问到放置我站流量互换代码的站，那么你的网站将在最近入站以及你网站所在分类的第一位置！连接双方公正平等。系统前台简介：1.采用ASP+ACCESS架构，安全稳定，防注入功能；2.新闻文章发布功能支持无限级分类，方便自由；3.数据库经过防下载等安全处理，后台可超强命名，随意改动；4.每来访一个IP，来访网站就会自动排到第一，当天来路不同，显示颜色也不同，鼓励点入；5.前台统计数据调用，最新点入网站调用，未审核网站调用等；6.申请加入电影网址大全的网站按最后点进的时间排序首页和分类显示链接；7.分类以昨日点入时间为准，每晚十二点后生成静态；8.每来访一个IP，就会自动排到第一，当天来路次数不同，显示颜色也不同：有1次即显示，10次即套蓝色，30次即套红色加粗；9.首页白天3分钟，晚上5分钟自动更新一次，全站24小时手动更新一次；10.站内搜索功能，方便用户找到自己想要的网址；11.程序全面优化和升级，增强对搜索引擎的收录功能；12.流量互换功能，最大程度互换流量。系统后台功能详细说明：管理目录：admin，管理员用户名：n3n5，密码：n3n5com网站管理系统：1.网站基本信息，说明:里面设置，网站标题，LOGO，关键词，统计代码，版权信息！2.图片广告管理，说明:网站所有图片广告修改的地方，在首页可以看到所有图片广告，其中ads09是在网址内页显示！其它的都在首页和分类页有位置显示！3.顶部文字广告管理，说明:这里的文字，首页，特别推荐里面显，分类首页和分类页，记得，改后要在生成html管理里，生成一下首页！4.添加商家文字广告，说明:这里的文字，首页，中间部分，广告，那里的文字，在图片广告下面，一行七个！5.管理商家文字广告，说明:修改删除商家文字广告!6.管理帐号设置，说明:管理员用户名，密码的修改！9.客户留言管理，说明:留言本的回复，修改和删除!网站分类管理：1.类别添加管理，说明:分类添加删除管理，这里说明一下添加时有首页显示，导航就显示在首页上面，添加时选酷站显示，就在首页下面酷站里调用！2.类别删除管理，说明:删除不想要的分类！3.类别修改管理，说明:分类修改里，有显示，[首][酷]就是上面说明的首页显示，和酷站显示！网址管理系统：1.添加网址链接，说明:用于后台管理员手工添加网址2.添加实用查询|管理实用查询，说明:添加后在首页实用工具里显示！3.添加名站导航|管理名站导航，说明:添加后在首页名站导航里显示！4.添加友情链接|管理友情链接，说明:添加后在首页下部友情链接里显示！5.查看所有的网址，说明:包含站长加的和用户自己加的！6.站长加入的网址，说明:站长加入的网址！7.用户加入已审核，说明:用户提交的网址，并通过审核的，说明一下，本站有自动审核功能，开启关闭，在 网站管理系统-网站基本信息里设置！8.用户加入未审核，说明:用户提交的网址没审的，也就是没有作上本站链接的，或是作上链接没有点击到本站的！9.有来路入未审核，说明:一般用户认为，有来路就应当审核了，这个功能，是为了关闭自动审核而设计的，手工审核的不管有没有来路，都要站长审核的！10.加入黑名单网站，说明:加入黑名单的网址，点击这个导航，进入后，可以删除，和取消黑名单！11.总来路小于五次，说明:本设计用于客户作上本站链接，点入量过小，没有贡献的站，可以多选删除！12.常用维护共三项，说明:（1）开通所有未审的，一般不用这个，如果想要提交的站就收录，可以点击这个功能！（2）删除重复的网站，有一些站长提交过了，又提交了多次或是用二级域名提交，这样可以删除重复的网站！（3）删除所有未审核的站点，（4）清空所有网址，这个点时要注意，点击了，所有网址就都没有了！13.站内报错，说明:用户在网址详提交网址打不开的情况页点击的！14.站内网站搜索，说明:可以按名称，按网址，按分类，按ID号进行搜索！ 模版修改管理：首 页 模版修改 分类页模版修改 关于本站页模板 （这里建议会一些HTML知识的站长修改，如果不会不建议修改以免出错，修改时一定要备份）生成html管理：生成分类页面 生成生成主页及其他页 重置统计数据 清除昨天点入数据 清除总点入数据 清除总点出数据 （常用到上面两个，生成分类页和生成主页，也主是首页！每当后台修改了内容时，要马上显示出来就要手动生成，因为前台自动生成要3分钟！）数据库管理：备份数据库 恢复数据库 压缩数据库 （常用到备份数据库，定期备份一下，免费数据库出错找不回来数据！）哇塞电影网址
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
专研前端，探索后端
05-16 1476
分页： 分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，bootstrap提供了分页功能，可以很好的解决这个问题，其用法：给父级ul标签添加pagination类，给子级li添加page-item,类样式如下： 类名 描述 .pagination 分页功能的容器添加的类名，用于布局 .page-item 给分页功能里面每一项添加的类名，用于选择伪类 ，布局链接样式
Bootstrap3.0学习第十二轮(导航、标签、面包屑导航)
专注IT
08-25 542
Bootstrap3.0学习第十二轮(导航、标签、面包屑导航) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来讲解以下内容 1.导航 2.标签 3.面包屑导航 4.总结 导航  Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似
Bootstrap组件（4）导航栏、面包屑导航
A-Select °
01-15 1199
Bootstrap 导航栏 默认的导航栏 向 <nav> 标签添加 class .navbar、.navbar-default。 向上面的元素添加 role=“navigation”，有助于增加可访问性。 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文...
Bootstrap 面包屑导航
歪脖先生的博客
03-10 2146
面包屑导航面包屑导航（Bread Crumbs Navigation）是一种辅助和补充的导航方式，非常适合展示站点的层级关系，能帮助用户明确当前所处的位置，并方便地提供返回的路径。Bootstrap 中，使用类为 .breadcrumb 的列表来定义面包屑导航，使用类为 .divider 的行内元素来定义列表项之间的分隔符。分隔符内的文本颜色较浅、字号较小。可以使用 “»”、“/”、“→”、“&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值