Bootstrap的导航栏设计相关知识

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.mzph.cn/news/112599.shtml

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

相关文章

Qt作业九

Qt作业九

1、思维导图 2、作业 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer> #include <QTime> #include <QTimerEvent> #include <QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAME…
阅读更多...
Linux网络-UDP/TCP协议详解

Linux网络-UDP/TCP协议详解

Linux网络-UDP/TCP协议详解 2023/10/17 14:32:49 Linux网络-UDP/TCP协议详解 零、前言一、UDP协议二、TCP协议 1、应答机制2、序号机制3、超时重传机制4、连接管理机制 三次握手四次挥手5、理解CLOSE_WAIT状态6、理解TIME_WAIT状态7、流量控制8、滑动窗口 丢包问题9、拥塞控制…
阅读更多...
Linux - 还不懂 gdb 调试器？（调试软件）

Linux - 还不懂 gdb 调试器？（调试软件）

前言 当前&#xff0c;我们可以使用 make/makefile 来程序化执行代码文件&#xff1b;可以使用 gcc/g 等编译器来编译代码&#xff1b;可以使用 vim 编辑器来编写代码&#xff1b;其实在 Linux 当中还有一个工具&#xff0c;可以实现调试工作&#xff0c;这个工具就是 -- gdb。…
阅读更多...
CSS 效果 圆形里一个文字居中

CSS 效果 圆形里一个文字居中

效果实现源码&#xff1a; 宽度&#xff0c;高度必须确认&#xff0c;且相等 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.circlew {width: 45px;height: 45p…
阅读更多...
PHPEXCEL解决行数超过65536不显示问题

PHPEXCEL解决行数超过65536不显示问题

起因自然是导出数据到excel文件时&#xff0c;数据缺少现象。 百度讲解是将xls文件另存为xlsx文件。 除了这里的原因&#xff0c;还有一点是phpExcel存在两个写入类PHPExcel_Writer_Excel2007和PHPExcel_Writer_Excel5&#xff0c;而只有PHPExcel_Writer_Excel2007支持超过65…
阅读更多...
可信执行环境简介：ARM 的 TrustZone

可信执行环境简介：ARM 的 TrustZone

目录 可信执行环境安全世界与普通世界 - 上下文切换机制ARMv7 中的异常处理ARMv8 中的异常处理 信任区商业实施TrustZone 本身的漏洞高通Trustonic 信任区强化的弱点结论声明 可信执行环境 具有信任区的 ARM 处理器实现了架构安全性每个物理处理器内核提供两个虚拟的扩展 核心…
阅读更多...
计数排序详解

计数排序详解

一、什么是计数排序&#xff1f; 计数排序(CountSort)是一个非基于比较的排序算法&#xff0c;该算法于1954年由 Harold H. Seward 提出。它的优势在于在对一定范围内的整数排序时&#xff0c;它的复杂度为Ο(nk)&#xff08;其中k是整数的范围&#xff09;&#xff0c;快于任何…
阅读更多...
HCIP静态路由综合实验

HCIP静态路由综合实验

题目&#xff1a; 步骤&#xff1a; 第一步&#xff1a;搭建上图所示拓扑; 第二步&#xff1a;为路由器接口配置IP地址&#xff1b; R1&#xff1a; [R1]display current-configuration intinterface GigabitEthernet0/0/0ip address 192.168.1.1 255.255.255.252 interfa…
阅读更多...
数据分析：密度图

数据分析：密度图

目前拥有的数据如图&#xff0c;三列分别对应瑕疵种类&#xff0c;对应的置信 度&#xff0c;x方向坐标。 现在想要做的事是观看瑕疵种类和置信度之间的关系。 要显示数据分布的集中程度&#xff0c;可以使用以下几种常见的图形来观察&#xff1a; 1、箱线图&#xff08;Box P…
阅读更多...
c++数组教程

c++数组教程

今天来讲讲数组 什么是数组&#xff1a; 我们来看一道题目&#xff1a; 【题目部分】 输入n个数,逆序输出它们. 输入 第一行一个整数n (0 < n < 60 ) 第二行n个整数 输出 一行,n个整数。 输入样例 1 5 1 6 2 8 4 输出样例 1 4 8 2 6 1 这下就难住很多人了&…
阅读更多...
【数据可视化】—大屏数据可视化展示

【数据可视化】—大屏数据可视化展示

【数据可视化】—大屏数据可视化展示 一、数据可视化 数据可视化的目的&#xff1a;借助于图形化工具&#xff0c;清晰有效的传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形&#xff0c;揭示蕴含在数据中的规律和道理。 二、 免费数据可视化库 Echarts 百度…
阅读更多...
Kurento多对多webrtc会议搭建测试

Kurento多对多webrtc会议搭建测试

环境ubuntu18.04 KMS版本6.13.0 多对多通信demo7.0.0 KMS运行起来后&#xff0c;通过运行它的一个个demo&#xff0c;来实现不同的功能&#xff0c;它的demo很多如下&#xff1a; https://github.com/Kurento 里面有一对一&#xff0c;多对多&#xff0c;还有一些特效的demo。…
阅读更多...
Android13 实现有线网络和wifi共存

Android13 实现有线网络和wifi共存

Android13 实现有线网络和wifi共存 文章目录 Android13 实现有线网络和wifi共存一、前言二、修改代码&#xff1a;1、ConnectivityService.java2、NetworkFactoryImpl.java3、Android11 和Android13 修改代码目录对比&#xff1a;4、如果只修改部分代码的后果只修改 Connectivi…
阅读更多...
提升医院安全的关键利器——医院安全（不良）事件报告系统源码

提升医院安全的关键利器——医院安全（不良）事件报告系统源码

医院是人们寻求医疗服务和康复的场所&#xff0c;安全是医院运营的基石。然而&#xff0c;医疗过程中不可避免地会出现不良事件&#xff0c;如药物错误、手术事故等。为了及时发现、评估和解决这些问题&#xff0c;医院安全&#xff08;不良&#xff09;事件报告系统应运而生。…
阅读更多...
聊聊Android线程优化这件事

聊聊Android线程优化这件事

一、背景 在日常开发APP的过程中&#xff0c;难免需要使用第二方库和第三方库来帮助开发者快速实现一些功能&#xff0c;提高开发效率。但是&#xff0c;这些库也可能会给线程带来一定的压力&#xff0c;主要表现在以下几个方面&#xff1a; 线程数量增多&#xff1a;一些库可…
阅读更多...
Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

Android问题笔记 - 关于SuperNotCalledException报错异常信息的解决方案

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…
阅读更多...
互联网Java工程师面试题·Java 面试篇·第一弹

互联网Java工程师面试题·Java 面试篇·第一弹

目录 1、Java 中能创建 volatile 数组吗&#xff1f; 2、volatile 能使得一个非原子操作变成原子操作吗&#xff1f; 3、volatile 修饰符的有过什么实践&#xff1f; 4、volatile 类型变量提供什么保证&#xff1f; 5、10 个线程和 2 个线程的同步代码&#xff0c;哪个更容…
阅读更多...
使用 ClickHouse 深入了解 Apache Parquet （二）

使用 ClickHouse 深入了解 Apache Parquet （二）

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 这篇文章是我们的 Parquet 和 ClickHouse 博客系列的第二部分。在这篇文章中&#xff0c;我们将更详细地探讨 Parquet 格式&#xff0c;重点介绍使用 ClickHouse 读写文…
阅读更多...
Xline 源码解读（四）—— CURP 状态机引擎

Xline 源码解读（四）—— CURP 状态机引擎

在上一篇源码解读的文章&#xff08;Xline 源码解读&#xff08;三&#xff09; —— CURP Server 的实现&#xff09;中&#xff0c;我们简单阐述了Xline 的 Curp Server 是如何实现的。接下来&#xff0c;就让我们话接上回&#xff0c;继续深入地来了解 Curp Server 中的一些…
阅读更多...
利用Python爬虫获取某乎热榜

利用Python爬虫获取某乎热榜

如今&#xff0c;某乎必须要登录才能查看相关话题内容&#xff0c;给我们的日常造成了极大的不便&#xff0c;今天我就教大家如何利用简单的代码&#xff0c;绕开登录限制。 准备工作 配置好python运行环境&#xff0c;推荐 pycharm。复制下面的源代码&#xff0c;运行&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023