Bootstrap的导航菜单组件相关知识

昊虹AI笔记2023-10-16 11:38

目录

01-最基本的导航示例

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<nav class="nav">
    <a class="nav-link active" href="#">首页</a>
    <a class="nav-link" href="#">热门课程</a>
    <a class="nav-link" href="#">技术支持</a>
    <a class="nav-link " href="#">联系我们</a>
</nav>
</body>
</html>

运行效果如下图所示：

02-设置导航的对齐方式

02-1-设置导航在水平方向上的对齐方式

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置导航水平方向对齐</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container border">
<h3 align="center">水平方向居中对齐</h3>
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#">联系我们</a>
    </li>
</ul>
<h3 align="center">水平方向右对齐</h3>
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link " href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

02-2-设置导航在垂直方向上进行布局

使用类flex-column可以设置导航的垂直布局。

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直对齐布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">垂直方向布局</h3>
<ul class="nav flex-column border">
    <li class="nav-item">
        <a class="nav-link active" href="#">家用电器</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">电脑办公</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">家装厨具</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">箱包钟表</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">食品生鲜</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">礼品鲜花</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

03-设计标签页导航

可以使用类nav-tabs实现标签页导航效果：

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标签页导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">标签页导航</h3>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

看到这里，估计还是不明白什么是"标签页导航"的效果，那我们去掉类 nav-tabs ，就知道了，去掉类nav-tabs 的效果如下：

04-带下拉菜单的标签页导航

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带下拉菜单的标签页导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">带下拉菜单的标签页导航</h3>
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">热门课程</a>
        <div class="dropdown-menu">
            <a class="dropdown-item active" href="#">网络安全训练营</a>
            <a class="dropdown-item" href="#">Python智能开发训练营</a>
            <a class="dropdown-item" href="#">网站开发训练营</a>
            <a class="dropdown-item" href="#">Java开发训练营</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下图所示：

05-设计胶囊式导航

05-1-基本的胶囊式导航

可以用类nav-pills实现胶囊式导航的效果。

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>胶囊式导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">胶囊式导航</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

非胶囊式导航的效果如下：

05-2-带下拉菜单的胶囊式导航

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>带下拉菜单的胶囊式导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">带下拉菜单的胶囊式导航</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link" href="#">经典教材</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">热门课程</a>
        <div class="dropdown-menu">
            <a class="dropdown-item active" href="#">网络安全训练营</a>
            <a class="dropdown-item" href="#">Python智能开发训练营</a>
            <a class="dropdown-item" href="#">网站开发训练营</a>
            <a class="dropdown-item" href="#">Java开发训练营</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

06-让导航菜单项可以切换(激活导航菜单项的交互行为)

上面的示例中的菜单项都不可以切换，通过这一部分的学习，使得菜单项可以切换，即导航菜单项的交互行为)。

这里以"胶囊式导航"为例来说明这个问题。

①为每个导航菜单项上的超链接定义 data-toggle="pill"属性 或 data-toggle="tab"属性，"胶囊式导航"用data-toggle="pill"属性 ，标签页导航用data-toggle="tab"属性。

②在导航结构基础上添加各导航菜单的内容结构。使用类tab-content定义内容显示结构。在内容包含结构中插入与导航结构对应的多个子内容框，并使用类tab-pane定义每一个子内容框。同时为每个子内容框定义id值，并在导航菜单项中为超链接绑定锚链接。

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>胶囊导航选项切换</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">胶囊导航选项切换</h3>
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="pill" href="#head">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#new">热门课程</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#template">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="pill" href="#about">联系我们</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="head">这里包含网站开发，编程开发和网络安全方面的经典教材</div>
    <div class="tab-pane" id="new">这里包含网站开发，编程开发和网络安全方面的视频课程</div>
    <div class="tab-pane" id="template">读者遇到技术问题可以留言</div>
    <div class="tab-pane" id="about">联系昊虹AI笔记</div>

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

运行效果如下：

07-菜单项填充水平空间

nav-fill类会将含有nav-item类的元素按照比例分配空间。注意：nav-fill类是分配导航菜单所有的水平空间，不是设置每个导航菜单项的宽度相同。

示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>填充</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">填充</h3>
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" href="#">经典教材</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">热门课程和热门专业</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">技术支持</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
    </li>
</ul>
</body>
</html>

运行效果如下：

相关推荐
树上有只程序猿2 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼37 分钟前
【万字总结】前端全方位性能优化指南（十）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下44 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致（火狐浏览器书签同步不一致）
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯（axios、ecahrts）版本二
前端·蓝桥杯
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)