位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > Bootstrap4 面包屑导航(Breadcrumb)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 胶囊状动态选项卡 下一篇: Bootstrap4 导航栏

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

Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSSbootstrap.min.css)中的 ::before content 来添加,下面所示的 class 自动被添加:

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}

Bootstrap4 面包屑导航实例

<ol>
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol>
  <li><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol>
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<ol>
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol>
  <li><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol>
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

我们也可以不用列表形式:

Bootstrap4 面包屑导航实例

<nav>
  <a href="#">Home</a>
  <a href="#">Library</a>
  <a href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<nav>
  <a href="#">Home</a>
  <a href="#">Library</a>
  <a href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>
 
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

上一篇: 胶囊状动态选项卡 下一篇: Bootstrap4 导航栏
毕业设计网             广告联系QQ:45157718(微信同号)