Bootstrap的导航栏设计相关知识

news2024/11/19 13:26:00

Bootstrap的导航栏设计相关知识

目录

  • 01-基础知识
  • 02-最基本的导航栏设计例子
  • 03-带下拉菜单的导航
  • 04-在导航栏中添加表单元素
  • 05-固定导航栏的位置(如固定到顶部和底部)
  • 06-设计导航栏的颜色和文本颜色

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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1105666.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ABB变频器使用PROFINET IO通信模块时的激活方法

ABB变频器使用PROFINET IO通信模块时的激活方法

ABB变频器使用PROFINET IO通信模块时的激活方法 ABB传动通讯总线适配器的激活（ACS380）： 首先，如下图所示，要采购并安装PROFINET IO总线通信模块（我这里支持3种通信协议，大家在实际使用时，用到哪种就购买哪种即可）， 如下图所示，进入参数设置， 如下图所示，进入“完…
阅读更多...
如何使用Python抓取PDF文件并自动下载到本地

如何使用Python抓取PDF文件并自动下载到本地

目录 一、导入必要的库 二、发送HTTP请求并获取PDF文件内容 三、将PDF文件内容写入到本地文件中 四、完整代码示例 五、注意事项 六、错误处理和异常处理 七、进一步优化 总结 在Python中&#xff0c;抓取PDF文件并自动下载到本地需要使用几个不同的库。首先&#xff0…
阅读更多...
EV SSL数字证书贵吗

EV SSL数字证书贵吗

EVSSL证书通常适用于具有高需求的网站和企业&#xff0c;特别是涉及在线交易、金融服务、电子商务平台等需要建立用户信任的场景。大型企业、金融机构、电子商务平台等可以受益于使用EV证书来提升品牌形象和安全性。 申请EVSSL证书&#xff08;Extended Validation SSL certifi…
阅读更多...
复制粘贴（二）：操作剪贴板 navigator.clipboard

复制粘贴（二）：操作剪贴板 navigator.clipboard

使用 navigator.clipboard 可以随时获取剪贴板对象&#xff08;也就是说&#xff0c;在 copy/paste 事件外也可以用&#xff09; 但是&#xff0c;此操作必须用户允许&#xff1a; readText readText() 获取剪贴板中的文本内容 <!DOCTYPE html> <html><head&…
阅读更多...
java: 错误: 无效的源发行版:17

java: 错误: 无效的源发行版:17

原因分析&#xff1a; 这个错误表明你的Java开发环境不支持Java 17的源发行版。这可能是因为你的JDK&#xff08;Java Development Kit&#xff09;版本过低&#xff0c;不支持Java 17的特性。 以下是解决此问题的一些步骤&#xff1a; 检查你的JDK版本&#xff1a;在命令行…
阅读更多...
java影院管理信息系统设计参考学习

java影院管理信息系统设计参考学习

系统设计&#xff1a; 1.1功能结构 为了更好的去理清本系统整体思路&#xff0c;对该系统以结构图的形式表达出来&#xff0c;设计实现该影院系统的功能结构图如下所示&#xff1a; 图1-1 系统总体结构图 1.2数据库设计 1.2.1数据库E/R图 ER图是由实体及其关系构成的图&…
阅读更多...
易点易动设备管理系统帮助生产企业提升设备维修效率

易点易动设备管理系统帮助生产企业提升设备维修效率

在现代制造业中&#xff0c;设备的正常运行对于生产企业的成功至关重要。然而&#xff0c;设备故障和维修工作常常成为生产过程中的瓶颈&#xff0c;影响生产效率和利润。为了解决这个问题&#xff0c;许多企业采用了现代化的设备管理系统&#xff0c;其中易点易动设备管理系统…
阅读更多...
智能管家“贾维斯”走进现实？AI Agent或成2023科技领域新风向标

智能管家“贾维斯”走进现实？AI Agent或成2023科技领域新风向标

漫威粉们想必都知道《钢铁侠》系列电影中&#xff0c;有一个不可或缺的角色——贾维斯。但就算是没有看过任何一部大电影的路人&#xff0c;只要通过一个词就可以了解“贾维斯”是一个什么样的角色——智能管家。 作为托尼斯塔克的助手&#xff0c;贾维斯的存在让主人的生活更…
阅读更多...
分享40个Python游戏源代码总有一个是你想要的

分享40个Python游戏源代码总有一个是你想要的

下载链接&#xff1a;https://pan.baidu.com/s/1bwj2GQM1CbO1x2EIC-ZF6g?pwd8888 提取码&#xff1a;8888 项目名称&#xff1a; Chinese Chess Xiangqi 中国象棋 Python Python 图形化麻将游戏 (带蒙特卡洛AI) python做的一个足球小游戏 python做的坦克大战游戏 py…
阅读更多...
【R】数据相关性的可视化

【R】数据相关性的可视化

一千零一技|相关性分析及其可视化&#xff1a;copy&paste&#xff0c;搞定 .libPaths(c("/bioinfo/home/software/miniconda3/envs/R4.0/lib/R/library")) #data("mtcars") library("PerformanceAnalytics") # pdf("test.pdf") #…
阅读更多...
前端开发调试技巧：如何在Component下选中当前插件并且查看当前插件信息

前端开发调试技巧：如何在Component下选中当前插件并且查看当前插件信息

在react开发项目中&#xff0c;在Component下选中组件&#xff0c;然后在控制台输$r 按回车键即可输出该组件信息。例如 $r.props输出该组件的props参数。例子详情见如下截图
阅读更多...
使用canvas实现图片轮播抽奖效果，轮播速度由慢到快，然后再到慢

使用canvas实现图片轮播抽奖效果，轮播速度由慢到快，然后再到慢

整体的效果就是中间的那张图片会连续不断地切换&#xff0c;我部署到github上面了&#xff0c;可以点击链接试一试&#xff1a;canvas在线抽奖系统效果 附上源代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…
阅读更多...
【C++那些事儿】初识C++ 命名空间，C++中的输入输出以及缺省函数

【C++那些事儿】初识C++ 命名空间，C++中的输入输出以及缺省函数

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;数据结构和算法初阶更新完毕&#xff0c;我们继续来扩充我们的知识面&#xff0c;今天我们从认识C开始来带大家学习C&#xff0c;我之前看过一套…
阅读更多...
半导体测试方法主要有哪几种？

半导体测试方法主要有哪几种？

外观检测&#xff1a;对半导体外观质量的评估&#xff0c;包括检查芯片的平整度、颜色、镜面度等。 电性能测试&#xff1a;测量半导体的电导率、电阻率、电流和电压特性等&#xff0c;以评估其电性能。 温度测试&#xff1a;用于测量半导体在不同温度下的电性能表现&#xf…
阅读更多...
软件测试过程中如何有效的开展接口自动化测试

软件测试过程中如何有效的开展接口自动化测试

一.简介 接口自动化测试是指使用自动化测试工具和脚本对软件系统中的接口进行测试的过程。其目的是在软件开发过程中&#xff0c;通过对接口的自动化测试来提高测试效率和测试质量&#xff0c;减少人工测试的工作量和测试成本&#xff0c;并且能够快速发现和修复接口错误&…
阅读更多...
37 WEB漏洞-反序列化之PHPJAVA全解(上)

37 WEB漏洞-反序列化之PHPJAVA全解(上)

目录 PHP反序列化演示案例&#xff1a;先搞一把PHP反序列化热身题稳住-无类问题-本地在撸一把CTF反序列化小真题压压惊-无类执行-实例最后顶一把网鼎杯2020青龙大真题舒服下-有类魔术方法触发-实例 https://www.cnblogs.com/zhengna/p/15661109.html 代码在线测试平台&#xff…
阅读更多...
相机镜头选择与机器视觉控制

相机镜头选择与机器视觉控制

相机镜头选择与机器视觉控制 在机器视觉领域&#xff0c;除了图像处理和算法&#xff0c;还需要关注硬件方面的选型和控制。相机镜头的选择是其中重要的一部分&#xff0c;需要考虑像素大小、镜头焦距等因素以满足项目需求。此外&#xff0c;编程技能也包括相机的调用和使用&a…
阅读更多...
django建站过程（1）

django建站过程（1）

django建站过程&#xff08;1&#xff09; 使用pycharm创建过程运行项目创建数据库创建超级用户登录生成的后台&#xff1a;界面本地化 准备以django,bootstrap来做一个过程记录&#xff0c;文章主要阐述过程的细节。 使用pycharm创建过程 创建项目“schoolapps”&#xff0c;…
阅读更多...
基于openHarmony实现本地UDP通信

基于openHarmony实现本地UDP通信

知识补充 简介 套接字(Socket)&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端&#xff0c;提供了应用层进程利用网络协议交换数据的机制。从所处的地位来讲&#xff0c;套接字上联应用进程&#xff0c;下联…
阅读更多...
MMDP: A Mobile-IoT Based Multi-Modal Reinforcement Learning Service Framework

MMDP: A Mobile-IoT Based Multi-Modal Reinforcement Learning Service Framework

框架 AHTT可被定义为 AHTT的元素表示智能体在动作为 a l m n a_{lmn} almn​的情况下从张量状态 s i j k s_{ijk} sijk​转移到另一个张量状态 s i j k ′ s_{ijk}^{} sijk′​的概率 通过数理统计首先得到多变量频率张量 状态 s i j k s_{ijk} sijk​的值函数等于策略 π…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023