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

已于 2023-10-22 09:29:47 修改
阅读量843 收藏 3
点赞数
分类专栏： Bootstrap 文章标签： bootstrap 前端 html
于 2023-10-15 17:47:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenhao_ir/article/details/133819035
版权

博主注：这篇博文和博文 https://blog.csdn.net/wenhao_ir/article/details/133901596 讲的东西是一个东西。

目录

01-最基本的导航示例

示例代码如下：

<!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-设置导航在水平方向上的对齐方式

示例代码如下：

<!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可以设置导航的垂直布局。
示例代码如下：

<!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实现标签页导航效果：
示例代码如下：

<!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-带下拉菜单的标签页导航

<!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实现胶囊式导航的效果。
示例代码如下：

<!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-带下拉菜单的胶囊式导航

示例代码如下：

<!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值，并在导航菜单项中为超链接绑定锚链接。
示例代码如下：

<!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类是分配导航菜单所有的水平空间，不是设置每个导航菜单项的宽度相同。
示例代码如下：

<!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>

运行效果如下：
在这里插入图片描述

昊虹AI笔记
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
高斯滤波的原理、OpenCV和MATLAB实现
06-24 240
上述代码中，我们创建了一个简单的 5x5 图像，并使用 OpenCV 提供的 cv2.GaussianBlur 函数对其进行高斯滤波处理。它基于高斯函数（Gaussian Function）来实现图像的模糊处理，从而减小图像中的噪声和细节，使图像变得更加平滑。卷积的过程实际上是将高斯核在图像上滑动，并计算每个位置的加权平均值，从而实现图像的模糊处理。去噪：高斯滤波可以有效地去除图像中的高频噪声，保留图像的主要特征。通过高斯滤波，图像中的细节和噪声会被平滑处理，从而得到模糊效果。
博客
什么叫图像的均值滤波,并附利用OpenCV和MATLB实现均值滤波的代码
06-19 340
均值滤波的主要效果是平滑图像，减少噪声，但也会导致图像变得模糊，因为细节部分会被均值化。而窗口的大小会影响平滑程度，窗口越大，平滑效果越明显，但细节丢失也越严重。均值滤波是一种常见的图像处理技术，主要用于平滑图像、去除噪声。：选择一个窗口（通常是一个正方形或矩形，比如 3×3或 5×5 的大小）。总的来说，均值滤波是一种简单而有效的图像处理方法，广泛用于各种图像处理任务中。：对于窗口中心的每个像素，计算窗口内所有像素的灰度值或颜色值的平均值。：用计算得到的均值替换窗口中心的像素值。
博客
什么叫图像的高斯噪声？并附添加高斯噪声的OpenCV代码和MATLAB代码
06-18 358
图像的高斯噪声（Gaussian noise）是一种常见的图像噪声类型，其特征在于噪声的概率分布服从高斯（正态）分布。总的来说，高斯噪声是一种重要的噪声模型，用于研究和处理图像中的随机干扰，许多图像处理和分析方法都针对这种噪声进行了优化和处理。生成图像高斯噪声的方法通常包括在图像的每个像素值上添加随机采样的高斯噪声值。利用OpenCV实现添加高斯噪声的Pyhton代码、利用MATLAB实现添加高斯噪声的代码见。这里，μ是均值，通常取 0（即噪声的平均值为零，不偏离原图像的亮度值）,是方差，表示噪声的强度。
博客
什么叫图像的椒盐噪声？并附添加椒盐噪声的代码
05-26 406
什么叫图像的椒盐噪声？并附添加椒盐噪声的代码
博客
Pycharm新建工程时使用Python自带解释器的方法
04-27 352
我的Python自带的解释器路径：C:\Users\Administrator\AppData\Local\Programs\Python\Python36\python.exe。新建Project时最好不要新建Python解释器，实践证明，自己新建的Python解释器容易出现各种意想不到的问题。Pycharm新建工程时使用Python自带解释器的方法。那么怎样使用Python安装时自带的解释器呢？看下面的三张截图大家就清楚了。
博客
Centos上批量压缩子目录为ZIP文件的代码
03-21 251
把目录/home/backup/test的第一级子目录依次进行压缩处理，压缩文件的格式为ZIP格式，压缩文件的名字就是子目录的名字，压缩文件存放于目录/home/backup/vgroup000001中。①一定要是一个子目录一个子目录的压缩，不要同时进行几个子目录的压缩，否则会把CPU的资源耗尽，然后，在终端中执行该脚本即可按照要求完成子目录的逐个压缩处理并提供状态提示。②需要有状态提示，比如哪个子目录完成了压缩，哪个子目录正在压缩。文件，并赋予执行权限（
博客
Cloudflare的Automaitc HTTPS Rewrites是什么意思？
03-14 447
Automaitc HTTPS Rewrites的意思是：Cloudflare会帮助你把响应内容中的http替换为https。
博客
secureCRT如何清屏？
02-22 1002
请注意，这些方法的效果可能会因连接的远程主机和其配置而有所不同。在某些情况下，可能需要使用。命令，而在其他情况下，使用快捷键或菜单选项可能更为有效。在 SecureCRT 菜单栏中，你可以选择。以清除屏幕上的所有文本。亲测在Windows上。
博客
如何解决利用cron定时任务自动更新SSL证书后Nginx重启问题
02-10 798
如何解决利用cron定时任务自动更新SSL证书后Nginx重启问题
博客
利用Python-OpenCV实现对目录中的所有png图片实现批量裁剪的代码
02-06 656
利用Python-OpenCV实现对目录中的所有png图片实现批量裁剪的代码
博客
Nginx检查有无错误和重启服务(重载配置)的命令行语句
02-04 620
【代码】Nginx检查有无错误和重启服务(重载配置)的命令行语句。
博客
Django的HTML模板如何引用上一级的目录下的文件？
01-28 600
Django的HTML模板如何引用上一级的目录下的文件？
博客
利用Python库VideoFileClip读取MP4视频长度的代码
01-26 817
利用Python库VideoFileClip读取MP4视频长度的代码
博客
mysql数据库中一个字段何时该用外键？
01-24 585
mysql数据库中一个字段何时该用外键？
博客
Django的mysql数据库问题：同一个模型(同一张表)中的不同记录也是可以相互关联的【使用“自引用关系”】
01-17 816
是的，确实可以在Django的模型中使用外键来建立同一模型中不同记录之间的关联关系。这样的关联关系被称为自引用关系（self-referential relationship）或者自关联关系。通过在模型中定义外键字段，你可以使模型的实例与同一模型中的其他实例产生关联。在Django中，这通常通过在模型的外键字段中引用模型本身来实现。如下面的例子所示，你可以在模型中添加一个外键字段，该字段引用同一模型中的其他记录，以建立记录之间的关联关系。在这个例子中，是指向同一模型的外键。通过设置'self'
博客
Django的数据库操作中的F对象是什么东西？
01-17 993
Django的数据库操作中的F对象是什么东西？
博客
利用Python的csv(CSV)库读取csv文件并取出某个单元格的内容的学习过程
01-15 1215
利用Python的csv(CSV)库读取csv文件并取出某个单元格的内容的学习过程
博客
Django数据库选移的preserve_default=False是什么意思？
01-14 836
表示当这个模型创造成功后，你后续新建行时的默认值就不再使用刚才指定的默认值了，而由用户来指定了。这也通常是用户的意思，所以一般在修改数据库迁移命令行时，并不会对语句。答：如果模型定义中定义了这个字段的值不能为空，那么在创造模型时如果数据库中已有记录，这个默认值在命令行时通常只能填为。则会让你为已经有的行提供默认值，，自己手动填一个值会报错。
博客
关于Django数据库模型的字段类型DateField的学习记录
01-10 616
关于Django字段类型DateField的学习记录
博客
关于Django字段类型DateTimeField：如何设置为自动填充插入数据库行的时间为其值
01-10 799
关于Django字段类型DateTimeField,如何设置为自动填充插入数据库行的时间为其值

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值