bootstrap-导航条层次的导航

简介:

说明

带有层次的导航结构中标明当前页面的位

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    	<title>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</head>
  	<body>
  		<ol class="breadcrumb">
		  	<li><a href="#">Home</a></li>
		  	<li><a href="#">Library</a></li>
		  	<li class="active">Data</li>
		</ol>

    	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出

wKioL1ijzu7Ce9llAAAN8yG9QQM767.png-wh_50



本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1897984

相关文章
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
JavaScript 前端开发
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle=&quot;offcanvas&quot;` 属性,可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。
Bootstrap5 侧边栏导航(Offcanvas)3
通过设置 `data-bs-scroll` 和 `data-bs-backdrop` 属性,可以控制侧边栏弹出时元素的滚动行为和背景画布的显示。示例中展示了不同配置下的滚动效果和背景画布的使用方法。
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏可通过`.offcanvas-start`、`.offcanvas-end`、`.offcanvas-top`和`.offcanvas-bottom`类分别设置在页面的左、右、顶、底位置。示例代码展示了如何使用这些类创建不同方向的侧边栏,包括按钮触发和内容区域的定义。
Bootstrap5 导航7
胶囊状动态选项卡通过设置 `data-bs-toggle=&quot;pill&quot;` 实现,包含导航项和内容区两部分。导航项使用 `&lt;ul class=&quot;nav nav-pills&quot;&gt;` 定义,每个选项链接到对应的内容区,实现点击切换显示的效果。内容区由多个 `&lt;div class=&quot;tab-pane&quot;&gt;` 组成,根据导航项的选择显示相应内容。
Bootstrap5 导航6
动态选项卡允许用户通过点击链接切换不同内容。在每个链接上添加 `data-bs-toggle=&quot;tab&quot;` 属性,并在对应内容的 `&lt;div&gt;` 标签中使用 `.tab-pane` 和 `.tab-content` 类。若需淡入效果,可在 `.tab-pane` 后添加 `.fade` 类。
|
前端开发 JavaScript 容器
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。