Bootstrap的导航栏设计相关知识

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

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

Bootstrap的导航栏设计相关知识

目录

01-基础知识

导航栏是网页设计中不可缺少的部分，它是整个网站的控制中枢，在每个页面中都会看到它。
在Bootstrap中，导航栏使用类navbar来定义，并放在标签nav中。

关于标签nav的介绍如下：
“nav” 不是HTML标准中的标签名。然而，HTML提供了一些用于导航的语义元素，通常使用 <nav> 元素来表示页面导航部分，如导航菜单、链接列表等。这个元素有助于改善文档的可访问性和语义结构。
所以虽然没有名为 “nav” 的标签，但 <nav> 元素用于将导航相关内容包装在其中，以提供更好的文档结构和语义。
不过Bootstrap对HTML中的 <nav> 元素进行了一定的样式和功能重定义，以提供一致的导航组件和用户界面元素。

在Bootstrap中，你可以使用 <nav> 元素以及Bootstrap的类来创建导航菜单、标签页、导航栏等组件。Bootstrap通过CSS类和JavaScript插件提供了各种导航相关功能，使导航的设计和交互更容易实现。

类navbar-brand与类navbar-nav：
navbar-brand 和 navbar-nav 是 Bootstrap 中用于导航栏（navbar）的两个不同的类，它们分别用于不同的导航栏元素和样式。

  1. navbar-brand 类：

    • navbar-brand 类通常用于导航栏中的品牌标志部分，如网站的标题、标志或品牌名称。
    • 这个类使文本或图标在导航栏中具有特殊的样式，通常会使它更大、更加突出，并通常位于导航栏的左侧。
    • 通常，只有一个 <a> 元素会应用 navbar-brand 类，用于显示网站的品牌标志或标题。

    示例：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站标题</a>
  <!-- 导航链接等内容 -->
</nav>

  2. navbar-nav 类：

    • navbar-nav 类通常用于导航栏中的导航链接部分，即包含页面链接的列表。
    • 这个类用于包装导航链接列表，以便在导航栏中创建一组链接。
    • 这类通常包含多个 <li> 元素，每个 <li> 元素包含一个 <a> 元素，用于表示不同的页面或部分。

    示例：

    <nav class="navbar navbar-expand navbar-light bg-light">
  <a class="navbar-brand" href="#">网站标题</a>
  <div>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <!-- 其他导航链接 -->
    </ul>
  </div>
</nav>

总之，navbar-brand 类用于定义导航栏中的品牌标志或标题，而 navbar-nav 类用于定义导航栏中的导航链接。这两个类通常一起使用，以构建具有品牌标志和导航链接的Bootstrap导航栏。

02-最基本的导航栏设计例子

<!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>
<nav class="navbar navbar-light bg-light my-4">
    <a class="navbar-brand" href="#">Bootstrap笔记</a>
</nav>
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="51.jpeg" width="30" alt="" >
    </a>
</nav>
<nav class="navbar navbar-light bg-light my-4">
    <a class="navbar-brand" href="#">
        <img src="52.jpeg" width="30" alt="" >
        Django笔记
    </a>
</nav>
</body>
</html>

这里介绍下类navbar-light：

navbar-light 是 Bootstrap 中用于定制导航栏（navbar）外观样式的类之一。这个类用于创建一个浅色主题的导航栏，通常适用于页面的明亮背景。

具体来说，navbar-light 类的特点如下：

  1. 浅色背景：当你将 navbar-light 类应用于导航栏元素时，它会将导航栏的背景颜色设置为浅色，通常是白色或浅灰色。这有助于确保导航栏在明亮的页面背景上更容易看见。

  2. 黑色文本：navbar-light 类还将导航栏中的文本颜色设置为黑色，以确保文本与浅色背景对比明显。

  3. 透明度：通常，浅色导航栏的背景是半透明的，这意味着页面背景可以在一定程度上透过导航栏。

这是一个简单的示例，如何在 Bootstrap 中使用 navbar-light 类创建一个浅色导航栏：

<nav class="navbar navbar-light bg-light">
  <!-- 导航栏内容，如品牌标志、导航链接等 -->
</nav>

在上面的示例中，navbar-light 类应用于 <nav> 元素，同时指定了 bg-light 类来设置背景颜色为浅色（灰色或白色）。你可以根据需要进一步自定义导航栏，例如添加品牌标志、导航链接等。

需要注意的是，Bootstrap 的外观类可以与其他类一起使用，以满足你的设计需求。此外，Bootstrap 提供了许多其他导航栏类和选项，以便于创建不同样式的导航栏，如 navbar-dark 用于创建深色导航栏等。

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

03-带下拉菜单的导航

<!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">
<nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">首页</a>
	
    <div>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link " href="#">源码资料</a>
            </li>
			
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                    主要笔记
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">图像处理笔记</a>
                    <a class="dropdown-item" href="#">Python笔记</a>
                    <a class="dropdown-item" href="#">前端笔记</a>
                </div>
            </li>
			
        </ul>
    </div>
	
</nav>
</body>
</html>

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

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="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>

<body class="container">
<nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand">昊虹AI笔记</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索热门笔记">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>
</body>

</html>

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

05-固定导航栏的位置(如固定到顶部和底部)

⑴类fixed-top：导航栏固定到顶部。
⑵类fixed-bottom：导航栏固定到底部。
示例代码如下：

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

<nav class="navbar navbar-light bg-light justify-content-between fixed-top">
    <a class="navbar-brand">导航栏一：顶部固定</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索热门课程">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

<div>
<p>第01段</p>
<p>第02段</p>
<p>第03段</p>
<p>第04段</p>
<p>第05段</p>
<p>第06段</p>
<p>第07段</p>
<p>第08段</p>
<p>第09段</p>
<p>第10段</p>
<p>第11段</p>
<p>第12段</p>
<p>第13段</p>
<p>第14段</p>
<p>第15段</p>
<p>第16段</p>
<p>第17段</p>
<p>第18段</p>
<p>第19段</p>
<p>第20段</p>

</div>

<nav class="navbar navbar-light bg-light justify-content-between fixed-bottom">
    <a class="navbar-brand">导航栏二：底部固定</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索热门课程">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

</body>
</html>

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

06-设计导航栏的颜色和文本颜色

可以利用类navbar-dark和类navbar-light设计导航栏的颜色和文本颜色。

在 Bootstrap 中，navbar-dark 和 navbar-light 是用于自定义导航栏外观的两个类。它们的主要区别在于导航栏的颜色和文本颜色。

  1. navbar-dark 类：

    • navbar-dark 类用于创建深色的导航栏，通常具有深色的背景颜色，例如深蓝色、深灰色或黑色。
    • 导航栏背景通常是深色的，以便与深色的文本和图标形成对比。
    • 文本和图标颜色通常是浅色的，例如白色或浅灰色，以确保清晰可读性。
    • 这个类适合在亮色背景的页面上使用，以确保导航栏元素清晰可见。

  2. navbar-light 类：

    • navbar-light 类用于创建浅色的导航栏，通常具有浅色的背景颜色，例如白色或浅灰色。
    • 导航栏背景通常是浅色的，以便与浅色的文本和图标形成对比。
    • 文本和图标颜色通常是深色的，例如黑色，以确保清晰可读性。
    • 这个类适合在深色背景的页面上使用，以确保导航栏元素清晰可见。

这些类使你能够轻松自定义导航栏的外观，以适应不同的设计需求和背景颜色。你可以根据项目的要求选择使用 navbar-dark 或 navbar-light 类来创建合适的导航栏。以下是一个示例代码，演示了如何在 Bootstrap 中应用这些类：

<nav class="navbar navbar-dark bg-dark">
  <!-- 导航栏内容 -->
</nav>

<!-- 或者 -->

<nav class="navbar navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

在上面的示例中，第一个导航栏使用了 navbar-dark 类，具有深色的背景和浅色的文本，而第二个导航栏使用了 navbar-light 类，具有浅色的背景和深色的文本。

总结： navbar-dark 类和 navbar-light 类的主要区别就在于：如果您想设计具有深色背景、浅色文本的导航栏，那么请用navbar-dark 类；如果您想设计具有浅色背景、深色文本的导航栏，那么请用navbar-light 类。

示例代码如下：

<!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>
<nav class="navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">类：navbar-dark 和 类：bg-dark</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索经典教材">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

<nav class="navbar navbar-expand navbar-light bg-info my-2">
    <a class="navbar-brand mr-auto" href="#">类：navbar-ligh 和 类：bg-info</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索热门课程">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

</body>
</html>

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

昊虹AI笔记
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客
图像处理中的Scharr算子的原理,并附OpenCV和MATLAB示例代码
07-16 350
Scharr算子是图像处理中的一种边缘检测算子，主要用于计算图像梯度的边缘检测。与Sobel算子类似，Scharr算子也使用卷积核来计算图像的导数，但Scharr算子在精度和抗噪性方面表现更优。Scharr算子通过计算图像在水平方向（x方向）和垂直方向（y方向）的梯度来检测边缘。对于每个像素点，用相应的卷积核在局部区域内进行加权求和，得到该点在x方向和y方向的梯度值。将卷积核与图像进行卷积运算，分别计算出图像在x方向和y方向的梯度。这些卷积核用于图像的卷积操作，以计算图像在各个方向上的梯度。
博客
图像边缘检测中Sobel算子的原理,并附OpenCV和Matlab的示例代码
07-15 468
图像边缘检测中Sobel算子的原理,并附OpenCV和Matlab的示例代码
博客
什么叫图像的双边滤波,并附利用OpenCV和MATLB实现双边滤波的代码
07-14 404
它在空间域和像素值域上同时进行加权，既考虑了像素之间的空间距离，也考虑了像素值之间的相似度，从而能够有效地平滑图像中的噪声，同时保留边缘细节。通过以上步骤，双边滤波能够在平滑图像的同时，保持边缘的锐利度，从而在去噪的同时不模糊图像中的重要细节。2 像素值加权：考虑中心像素与邻域像素之间的像素值差异。使用高斯函数来计算权重，像素值差异越大，权重越小。1 空间加权：考虑中心像素与邻域像素之间的空间距离。这种权重计算与传统的高斯滤波类似。3 加权求和：结合空间权重和像素值权重，对中心像素进行加权平均。
博客
什么叫图像的中值滤波,并附利用OpenCV和MATLB实现均值滤波的代码
07-13 373
图像的中值滤波（Median Filtering）是一种非线性数字滤波技术，常用于图像处理以减少噪声，同时保留图像边缘细节。其基本思想是用图像中某个窗口内像素的中值替代该窗口中心像素的值。：定义一个窗口（也称为滤波器或核），通常为3x3、5x5或7x7的方形矩阵。窗口的大小可以根据需要调整。：将窗口滑动到图像中的每一个像素点，使得每次窗口覆盖一个像素和其周围的像素。：对于窗口内的所有像素值进行排序，然后选择排序后的中值。这一步是中值滤波的核心。：用排序后的中值替代窗口中心像素的值。
博客
高斯滤波的原理、OpenCV和MATLAB实现
06-24 327
上述代码中，我们创建了一个简单的 5x5 图像，并使用 OpenCV 提供的 cv2.GaussianBlur 函数对其进行高斯滤波处理。它基于高斯函数（Gaussian Function）来实现图像的模糊处理，从而减小图像中的噪声和细节，使图像变得更加平滑。卷积的过程实际上是将高斯核在图像上滑动，并计算每个位置的加权平均值，从而实现图像的模糊处理。去噪：高斯滤波可以有效地去除图像中的高频噪声，保留图像的主要特征。通过高斯滤波，图像中的细节和噪声会被平滑处理，从而得到模糊效果。
博客
什么叫图像的均值滤波,并附利用OpenCV和MATLB实现均值滤波的代码
06-19 372
均值滤波的主要效果是平滑图像，减少噪声，但也会导致图像变得模糊，因为细节部分会被均值化。而窗口的大小会影响平滑程度，窗口越大，平滑效果越明显，但细节丢失也越严重。均值滤波是一种常见的图像处理技术，主要用于平滑图像、去除噪声。：选择一个窗口（通常是一个正方形或矩形，比如 3×3或 5×5 的大小）。总的来说，均值滤波是一种简单而有效的图像处理方法，广泛用于各种图像处理任务中。：对于窗口中心的每个像素，计算窗口内所有像素的灰度值或颜色值的平均值。：用计算得到的均值替换窗口中心的像素值。
博客
什么叫图像的高斯噪声？并附添加高斯噪声的OpenCV代码和MATLAB代码
06-18 454
图像的高斯噪声（Gaussian noise）是一种常见的图像噪声类型，其特征在于噪声的概率分布服从高斯（正态）分布。总的来说，高斯噪声是一种重要的噪声模型，用于研究和处理图像中的随机干扰，许多图像处理和分析方法都针对这种噪声进行了优化和处理。生成图像高斯噪声的方法通常包括在图像的每个像素值上添加随机采样的高斯噪声值。利用OpenCV实现添加高斯噪声的Pyhton代码、利用MATLAB实现添加高斯噪声的代码见。这里，μ是均值，通常取 0（即噪声的平均值为零，不偏离原图像的亮度值）,是方差，表示噪声的强度。
博客
什么叫图像的椒盐噪声？并附添加椒盐噪声的代码
05-26 434
什么叫图像的椒盐噪声？并附添加椒盐噪声的代码
博客
Pycharm新建工程时使用Python自带解释器的方法
04-27 395
我的Python自带的解释器路径：C:\Users\Administrator\AppData\Local\Programs\Python\Python36\python.exe。新建Project时最好不要新建Python解释器，实践证明，自己新建的Python解释器容易出现各种意想不到的问题。Pycharm新建工程时使用Python自带解释器的方法。那么怎样使用Python安装时自带的解释器呢？看下面的三张截图大家就清楚了。
博客
Centos上批量压缩子目录为ZIP文件的代码
03-21 276
把目录/home/backup/test的第一级子目录依次进行压缩处理，压缩文件的格式为ZIP格式，压缩文件的名字就是子目录的名字，压缩文件存放于目录/home/backup/vgroup000001中。①一定要是一个子目录一个子目录的压缩，不要同时进行几个子目录的压缩，否则会把CPU的资源耗尽，然后，在终端中执行该脚本即可按照要求完成子目录的逐个压缩处理并提供状态提示。②需要有状态提示，比如哪个子目录完成了压缩，哪个子目录正在压缩。文件，并赋予执行权限（
博客
Cloudflare的Automaitc HTTPS Rewrites是什么意思？
03-14 514
Automaitc HTTPS Rewrites的意思是：Cloudflare会帮助你把响应内容中的http替换为https。
博客
secureCRT如何清屏？
02-22 1170
请注意，这些方法的效果可能会因连接的远程主机和其配置而有所不同。在某些情况下，可能需要使用。命令，而在其他情况下，使用快捷键或菜单选项可能更为有效。在 SecureCRT 菜单栏中，你可以选择。以清除屏幕上的所有文本。亲测在Windows上。
博客
如何解决利用cron定时任务自动更新SSL证书后Nginx重启问题
02-10 864
如何解决利用cron定时任务自动更新SSL证书后Nginx重启问题
博客
利用Python-OpenCV实现对目录中的所有png图片实现批量裁剪的代码
02-06 683
利用Python-OpenCV实现对目录中的所有png图片实现批量裁剪的代码
博客
Nginx检查有无错误和重启服务(重载配置)的命令行语句
02-04 640
【代码】Nginx检查有无错误和重启服务(重载配置)的命令行语句。
博客
Django的HTML模板如何引用上一级的目录下的文件？
01-28 622
Django的HTML模板如何引用上一级的目录下的文件？
博客
利用Python库VideoFileClip读取MP4视频长度的代码
01-26 897
利用Python库VideoFileClip读取MP4视频长度的代码
博客
mysql数据库中一个字段何时该用外键？
01-24 598
mysql数据库中一个字段何时该用外键？
博客
Django的mysql数据库问题：同一个模型(同一张表)中的不同记录也是可以相互关联的【使用“自引用关系”】
01-17 831
是的，确实可以在Django的模型中使用外键来建立同一模型中不同记录之间的关联关系。这样的关联关系被称为自引用关系（self-referential relationship）或者自关联关系。通过在模型中定义外键字段，你可以使模型的实例与同一模型中的其他实例产生关联。在Django中，这通常通过在模型的外键字段中引用模型本身来实现。如下面的例子所示，你可以在模型中添加一个外键字段，该字段引用同一模型中的其他记录，以建立记录之间的关联关系。在这个例子中，是指向同一模型的外键。通过设置'self'
博客
Django的数据库操作中的F对象是什么东西？
01-17 1014
Django的数据库操作中的F对象是什么东西？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值