【1】Bootstrap 开发 - navs tabs pills 导航效果

最新推荐文章于 2022-06-18 16:37:27 发布
最新推荐文章于 2022-06-18 16:37:27 发布
阅读量3.2k 收藏 16
点赞数 3
分类专栏： # Web 前端 文章标签： bootstrap 前端 html
本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/122064283
版权

目录

一、目标

1、效果图如下

2、视频效果如下

二、navs 类型讲解

1、基本的nav效果​

2、nav-tabs 效果

3、nav-pills 效果

4、nav-pills dropdown效果

三、编码实现

1、引入cdn最新5.1.3版bootstrap.min.css

2、引入cdn最新5.1.3版bootstrap.min.js

3、页面布局分3栏

 4、导航栏ul，使用 nav nav-pills 定义

5、内容栏 div，使用 tab-content 类定义

（1） 定义对应 li子项 href 的 div（id），实现跳转

四、一页完整代码，copy即可运行

五、效果展示

六、参考文档

一、目标

使用 Bootstrap Navs tabs  pills 开发出导航栏。

1、效果图如下

2、视频效果如下

数据可视化大屏集锦 - BT nav导航_哔哩哔哩_bilibili

二、navs 类型讲解

1、基本的nav效果

2、nav-tabs 效果

3、nav-pills 效果

 4、nav-pills dropdown效果

三、编码实现

1、引入cdn最新5.1.3版bootstrap.min.css

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

2、引入cdn最新5.1.3版bootstrap.min.js

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
		crossorigin="anonymous"></script>

3、页面布局分3栏

 4、导航栏ul，使用 nav nav-pills 定义

<ul class=" nav nav-pills nav-fill" role="tablist">

....

</ul>

（1）单层导航：nav-item

ul 中的 nav-pills 为类型，nav-fill 按比例填满所有可用空间。

li 为ul子项，a中的href控制跳转目标，data-bs-toggle控制交互。

    <li class="nav-item">
		<a class="nav-link active" data-bs-toggle="pill" href="#menu1-tlz">【1-托拉拽】大屏</a>
	</li>

（2）下拉导航 ：nav-item dropdown

<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="True">【1 - 5】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu1">【1】互联网企业数据大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu2">【2】物流大数据大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu3">【3】物联网大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu4">【4】医院大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu5">【5】互联网热点分析大屏</a>
					</li>
				</ul>
			</li>

5、内容栏 div，使用 tab-content 类定义

<div class="tab-content">

...

</div>

（1） 定义对应 li子项 href 的 div（id），实现跳转

active表示当前默认为激活状态。tab-pane支持nav的切换。

<div id="menu1-tlz" class="container tab-pane active">
	<img src="img/1-托拉拽.gif" width="100%">
</div>
<div id="menu1" class="container tab-pane fade">
	<img src="img/1.gif" width="100%">
</div>

四、一页完整代码，copy即可运行

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
		crossorigin="anonymous"></script>
</head>

<body>
	<!-- 标题 -->
	<div class="row bg-light">
		<h2 style="font-weight: bold;">BootStrap 胶囊选项卡示例</h2>
	</div>
	<br>

	<!-- 导航 -->
	<div class="row bg-light">
		<!-- Nav pills -->
		<ul class=" nav nav-pills nav-fill" role="tablist">

			<li class="nav-item">
				<a class="nav-link active" data-bs-toggle="pill" href="#menu1-tlz">【1-托拉拽】大屏</a>
			</li>

			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="True">【1 - 5】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu1">【1】互联网企业数据大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu2">【2】物流大数据大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu3">【3】物联网大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu4">【4】医院大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu5">【5】互联网热点分析大屏</a>
					</li>
				</ul>
			</li>

			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="false">【6 - 10】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu6">【6】互联网大数据统计</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu7">【7】用户分析大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu8">【8】旅游服务大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu9">【9】酒店行业大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu10">【10】运动健康大屏</a>
					</li>
				</ul>
			</li>

			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="false">【11 -
					15】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu11">【11】销售指标大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu12">【12】供应商大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu13">【13】旅游趋势大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu14">【14】新能源业务大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu15">【15】世界人口统计大屏</a>
					</li>
				</ul>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="false">【16 -
					20】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu16">【16】城市存量房大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu17">【17】内容营销热点榜大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu18">【18】微博实时热点大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu19">【19】bilibili热点榜大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu20">【20】福布斯排行榜大屏</a>
					</li>
				</ul>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
					aria-expanded="false">【20 -
					24】可视化大屏案例</a>
				<ul class="dropdown-menu">
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu21">【21】Excel数据源大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu22">【22】DataBase数据源大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu23">【23】Redis数据源大屏</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-bs-toggle="pill" href="#menu24">【24】WebSocket协议大屏</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<br>

	<!-- 内容 -->
	<div class="row bg-success">
		<!-- Tab panes -->
		<div class="tab-content">
			<div id="menu1-tlz" class="container tab-pane active">
				<img src="img/1-托拉拽.gif" width="100%">
			</div>
			<div id="menu1" class="container tab-pane fade">
				<img src="img/1.gif" width="100%">
			</div>
			<div id="menu2" class="container tab-pane fade">
				<img src="img/2.gif" width="100%">
			</div>
			<div id="menu3" class="container tab-pane fade">
				<img src="img/3.gif" width="100%">
			</div>
			<div id="menu4" class="container tab-pane fade">
				<img src="img/4.gif" width="100%">
			</div>
			<div id="menu5" class="container tab-pane fade">
				<img src="img/5.gif" width="100%">
			</div>
			<div id="menu6" class="container tab-pane fade">
				<img src="img/6.gif" width="100%">
			</div>
			<div id="menu7" class="container tab-pane fade">
				<img src="img/7.gif" width="100%">
			</div>
			<div id="menu8" class="container tab-pane fade">
				<img src="img/8.gif" width="100%">
			</div>
			<div id="menu9" class="container tab-pane fade">
				<img src="img/9.gif" width="100%">
			</div>
			<div id="menu10" class="container tab-pane fade">
				<img src="img/10.gif" width="100%">
			</div>
			<div id="menu11" class="container tab-pane fade">
				<img src="img/11.gif" width="100%">
			</div>
			<div id="menu12" class="container tab-pane fade">
				<img src="img/12.gif" width="100%">
			</div>
			<div id="menu13" class="container tab-pane fade">
				<img src="img/13.gif" width="100%">
			</div>
			<div id="menu14" class="container tab-pane fade">
				<img src="img/14.gif" width="100%">
			</div>
			<div id="menu15" class="container tab-pane fade">
				<img src="img/15.gif" width="100%">
			</div>
			<div id="menu16" class="container tab-pane fade">
				<img src="img/16.gif" width="100%">
			</div>
			<div id="menu17" class="container tab-pane fade">
				<img src="img/17.gif" width="100%">
			</div>
			<div id="menu18" class="container tab-pane fade">
				<img src="img/18.gif" width="100%">
			</div>
			<div id="menu19" class="container tab-pane fade">
				<img src="img/19.gif" width="100%">
			</div>
			<div id="menu20" class="container tab-pane fade">
				<img src="img/20.gif" width="100%">
			</div>
			<div id="menu21" class="container tab-pane fade">
				<img src="img/21.gif" width="100%">
			</div>
			<div id="menu22" class="container tab-pane fade">
				<img src="img/22.gif" width="100%">
			</div>
			<div id="menu23" class="container tab-pane fade">
				<img src="img/23.gif" width="100%">
			</div>
			<div id="menu24" class="container tab-pane fade">
				<img src="img/24.gif" width="100%">
			</div>

		</div>
	</div>
</body>

</html>

五、效果展示

数据可视化大屏集锦 - BT nav导航_哔哩哔哩_bilibili

六、参考文档

官方文档：Navs and tabs · Bootstrap v5.1

菜鸟文档：Bootstrap5 导航 | 菜鸟教程

YYDataV软件开发
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
/.nav-tabs :是普通标签页 .nav-pills:胶囊式标签页 action ;默认的激活项，给<li>加默认显示的是哪个标签页内容 .nav是标签页的一个基类，给ul加 .nav-stac...
diaofenquan8810的博客
09-18 894
<meta name="viewport" content="with=device-width, initial-scale=1, user-scalabe=no"> BootStrap是一种前端框架 BootStrap布局 必须放在这两个容器中的其中一个 <div class="container></div> 或者<div c...
Bootstrap 5 导航
最新发布
wjs2024的博客
07-26 313
Bootstrap 5 提供了一套完整的导航组件，包括导航栏（Navbar）、选项卡（Tabs）、胶囊（Pills）、面包屑（Breadcrumbs）和分页（Pagination）。这些组件设计用于创建直观且易于导航的用户界面。
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
qq_27371025的博客
10-13 2219
前言 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。 tab标签页 在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。 在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs"> <li><a h
Bootstrap选项卡
weixin_34216036的博客
07-10 803
前面的话 　　选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项，能切换出对应的内容。本文将详细介绍Bootstrap选项卡 基本用法 　　Bootstrap框架中的选项卡主要有两部分内容组成： 　　1、选项卡菜单组件，对应的是 Bootstrap的 nav-tabs 　　2、可以切换的选项卡面板组件，在 Bootstrap 中通常 tab-pane 来表示 　　在Boots...
bootstrap nav nav-tabs add tab javascript
weixin_33724659的博客
08-24 190
$('#btnAdd').click(function (e) { var nextTab = $('#tabs li').size()+1; // create the tab $('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').a...
Bootstrap 导航元素（ tab导航）标签页
雪锋的笔记
09-25 7282
1、基本的导航元素：标签导航。基于ul、li而来，给ul添加class="nav nav-tabs" 即可。选中的li添加class="active"即可。 <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a&gt..
Bootstrap V3 nav-tabs 完整例子
Rudon滨海渔村的博客
09-17 657
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Bootstrap V3 nav-tabs 测试</title> <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet.
bootstrap之navs&pagination样式
xixi
11-09 4890
一、前言现在开始介绍bootstrap的 navs(导航) 和 pagination(分页)，包括 navs.less、pagination.less。二、源码1、navs.less1.1、navs.less源码 // // Navs(导航) // -------------------------------------------------- // Base class(基础样式) /
bootstrap导航菜单模板
03-31
2. **导航链接（Navs）**: Bootstrap的`<ul>`和`<li>`元素可以通过添加`.nav`类转换为导航链接，如`.nav-tabs`（选项卡式）和`.nav-pills`（药片状）。`4menus.htm`、`5menus.htm`等可能展示了不同样式的导航链接。 ...
Bootstrap JavaScript插件：可切换标签 (tab.js)
WangMin@汪末末
09-09 1486
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 一个可切换的标签导航包含两部分内容，一个是标签导航，一个是内容面板。每个标签都有一个对应的内容面板，当标签发生切换时，自动切换到相应的内容面板。内容面板如下： <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel"> <p>第一部分</p>
Bootstrap 导航/滑动门（nav）
weixin_44543412的博客
05-28 3813
Bootstrap 导航/滑动门（nav） 开发工具与关键技术：Visual Studio 前端 作者：盘子 撰写时间：2019年5 月27 日 .nav导航/滑动门(nav) 1、基本导航样式 Bootstrap中提供的导航可共享通用标记和样式，从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。 基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航...
Bootstrap每天必学之导航
11-24
Bootstrap CSS中的`_navs.scss`（LESS版本为`navs.less`）源码定义了这些样式，包括默认的外观和交互效果，如悬停时的背景颜色变化。 2. **导航按钮（Pill式）**：如果需要创建更圆润的导航样式，可以使用`nav-...
bootstrap中的Navigational tabs, pills,和lists标签
ling811的专栏
11-19 1320
1、Navigational tabs标签用法，简单的实验： 1 2 1111
Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一）
weixin_55945754的博客
01-24 1811
在Bootstrap的组件中，有个胶囊式标签页。在这里记录一下。怎么将这个胶囊是标签页和我们H5的<iframe>结合起来。 查看Boostrap帮助文档 组件 在Bootstrap帮助文档的组件中，可以找到导航 -> 胶囊式标签页，在这里可以看到这部分的代码。 但是，这里只有如图所示的三个标签页的按钮，只能按，没有任何实际的效果。怎么办捏。于是我找啊找，就到了下面这个步骤了。 JavaScript插件 于是，找到了帮助文档 -> JavaScript插件 -> 标签页，在其
Bootstrap系列之导航（Navs）
老__L的博客
06-18 4790
关于如何使用Bootstrap包含的导航组件的文档和示例。Bootstrap中可用的导航共享一般的标记和样式，从基本的类到激活和禁用状态。交换修饰符类以在每种样式之间切换。基本的组件是用flexbox构建的，为构建所有类型的导航组件提供了一个强大的基础。它包括一些样式重写(用于处理列表)，一些链接填充用于更大的点击区域，以及基本禁用的样式。 整个过程都使用类，因此您的标记可以非常灵活。使用如上图，如果您的项目的顺序是很重要的，或你自己滚元素。因为使用了，所以链接的行为与nav项目相同，但没有额外的标记。
bootstrap nav 导航栏
soul_is的博客
02-19 234
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="utf-8"&gt;      &lt;title&gt;Bootstrap 实例 - 标签页（Tab）插件&lt;/title&gt;     &lt;link rel="stylesheet" href="http
浅析Bootstrap中Tab（标签页）的使用方法
热门推荐
极客神殿
10-23 2万+
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换 如&amp;quot;.nav-pills&amp;quot;（胶囊式导航）与 “.nav-tabs” （标签式导航） 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs。 下面的实例演示了这点： Home Profile Messages Sett...
Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（二）
weixin_55945754的博客
01-24 904
上期回顾：Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一） 所以，我们只需要在tap-content``tap-pane中用上iframe就可以了。 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
为Bootstrap标签页切换nav-tab组件添加 切换回调方法 - callback
Rudon滨海渔村的博客
10-19 1245
效果 nav-tab标签切换后，js可以执行指定函数。 关键代码 <ul class="nav nav-tabs nav-justified" role="tablist"> <li role="presentation" class="active"> <a href="#tab1st" aria-controls="tab1st" role="tab" data-toggle="tab" data-target-go='AAA'>
bootstrap　d-flex不起效果
06-10
如果 `d-flex` 类不起效果，有可能是以下原因： 1. 元素没有设置宽度或高度：在使用 `display:flex` 布局时，子元素的宽度和高度是由其父元素来确定的。如果父元素没有设置宽度或高度，那么子元素的宽度和高度将无法计算，从而导致 `d-flex` 类不起效果。 2. 其他样式影响了 `d-flex` 类的效果：如果在 `d-flex` 类应用之前，已经应用了其他样式，比如 `float` 或 `position` 属性等，它们可能会影响 `d-flex` 类的效果。在这种情况下，建议将这些样式移除或覆盖。 3. 引入了其他 CSS 框架：如果在使用 Bootstrap 的同时，还引入了其他 CSS 框架，比如 Foundation 或 Materialize 等，它们可能会与 Bootstrap 中的样式发生冲突，导致 `d-flex` 类不起效果。 针对以上原因，建议检查父元素的宽高设置、其他样式是否影响了 `d-flex` 类的效果，以及是否引入了其他 CSS 框架。如果还有问题，可以提供更具体的代码和描述，以便更好地协助解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYDataV软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值