【1】Bootstrap 开发 - navs tabs pills 导航效果
2024-05-20 04:59:05
目录
一、目标
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 导航 | 菜鸟教程
【1】Bootstrap 开发 - navs tabs pills 导航效果相关推荐
- Android studio实现底部导航,Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果...
BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退. ...
- Bootstrap 可切换的标签导航
标签间的切换,需要 bootstrap-tab.js 文件支持,因此,要实现可切换的标签导航,首先需要导入 jQuery 库和 bootstrap-tab.js 插件: <script src= ...
- iOS开发UINavigation系列四——导航控制器UINavigationController
iOS开发UINavigation系列四--导航控制器UINavigationController 一.引言 在前面的博客中,我么你介绍了UINavigationBar,UINavigationIte ...
- android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航 内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
- 开发Teams Tabs应用程序
什么是Teams Tabs Tabs是微软Teams的一种十分有用的扩展方式.可以非常方便的和现有的网站或者网页应用进行整合.具体的说明不在这里展开了.可以阅读微软官方的详细说明: https://d ...
- Bootstrap鼠标悬停下拉导航总结
文章目录 Bootstrap鼠标悬停下拉导航总结 方案一 · 源码修改 添加css代码 方案二 · 不改动源码 附件:压缩版本 de 源码修改 Bootstrap鼠标悬停下拉导航总结 以bootstr ...
- 20、Tabs底部导航栏
一.Tabs基本使用 TabHost的实现有两种方式: 第一种继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.各个Tab中的内容在布局文件中定义 ...
- 最新ThinkPHP开发的简约自适应导航网站源码
正文: ThinkPHP开发的简约自适应导航网站源码下载,使用 thinkphp+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网 ...
- VSTO | 零基础开发个人专属PPT导航插件
hello,大家好,我是似最初 一名不着调的PPTer 谈起PPT插件,几乎现在已经被@只为设计巨佬开发到天花板了 所以作为小白,只能简单和大家共同探讨一下如何做一款独属的PPT导航插件. 诸如下面这 ...
最新文章
- R可视化绘制卡方分布图（Chi-Square Distribution）
- 纯数学教程 Page 203 例XLI (6)
- python2/python3安装pip/pip3及使用国内镜像源（python2/3同时安装）
- 字符串相似度算法——Levenshtein Distance算法
- 奇技淫巧：在spring官网上下载历史版本的spring插件，springsource-tool-suite
- SQL Server 关于列的权限控制
- （转）GitHub 被微软收购后的 52 天，改版并放弃了 jQuery！
- Hadoop：Hadoop简介及环境配置
- ElasticSearch全文搜索引擎之查询API篇
- Android架构 armeabi、armeabi-v7a、arm64-v8a、x86详解
- Centos7安装masscan
- Android之Material Dialogs详解(非原创）
- 10月20日前!武汉市科技成果转化中试平台(基地)备案申报条件及流程梳理
- 2021-01-21：脉冲神经网络学习日志
- Excel怎么实现图片查找功能？
- Sketch 插件导出切片
- Tether聘请前银行分析师首席合规官
- 成功解决ThinkPad T14 高负载下CPU降频问题
- Windows 撤销快捷键“ctrl+z“失效解决方法
- 你的小程序可以接广告赚钱了