Bootstrap的导航栏设计相关知识

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

Bootstrap的导航栏设计相关知识

01-基础知识

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

关于标签nav的介绍如下：
“nav” 不是HTML标准中的标签名。然而，HTML提供了一些用于导航的语义元素，通常使用

元素来表示页面导航部分，如导航菜单、链接列表等。这个元素有助于改善文档的可访问性和语义结构。
所以虽然没有名为 “nav” 的标签，但

元素用于将导航相关内容包装在其中，以提供更好的文档结构和语义。
不过Bootstrap对HTML中的

元素进行了一定的样式和功能重定义，以提供一致的导航组件和用户界面元素。

在Bootstrap中，你可以使用

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

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

navbar-brand 类：
- navbar-brand 类通常用于导航栏中的品牌标志部分，如网站的标题、标志或品牌名称。
- 这个类使文本或图标在导航栏中具有特殊的样式，通常会使它更大、更加突出，并通常位于导航栏的左侧。
- 通常，只有一个元素会应用 navbar-brand 类，用于显示网站的品牌标志或标题。
示例：
```
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">网站标题a>
  
nav>
1
2
3
4
```

navbar-nav 类：

navbar-nav 类通常用于导航栏中的导航链接部分，即包含页面链接的列表。

这个类用于包装导航链接列表，以便在导航栏中创建一组链接。

这类通常包含多个

元素，每个

元素包含一个元素，用于表示不同的页面或部分。

示例：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总之，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里介绍下类navbar-light：

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

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

浅色背景：当你将 navbar-light 类应用于导航栏元素时，它会将导航栏的背景颜色设置为浅色，通常是白色或浅灰色。这有助于确保导航栏在明亮的页面背景上更容易看见。
黑色文本：navbar-light 类还将导航栏中的文本颜色设置为黑色，以确保文本与浅色背景对比明显。
透明度：通常，浅色导航栏的背景是半透明的，这意味着页面背景可以在一定程度上透过导航栏。

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

<nav class="navbar navbar-light bg-light">
  
nav>
1
2
3

在上面的示例中，navbar-light 类应用于

元素，同时指定了 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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

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

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

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

navbar-dark 类：
- navbar-dark 类用于创建深色的导航栏，通常具有深色的背景颜色，例如深蓝色、深灰色或黑色。
- 导航栏背景通常是深色的，以便与深色的文本和图标形成对比。
- 文本和图标颜色通常是浅色的，例如白色或浅灰色，以确保清晰可读性。
- 这个类适合在亮色背景的页面上使用，以确保导航栏元素清晰可见。
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>
1
2
3
4
5
6
7
8
9

在上面的示例中，第一个导航栏使用了 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-darka>
    <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-infoa>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

相关阅读:
webpack PostCSS工具
 使用Portman、Postman和Newman自动化API测试
 【AI大模型】赋能儿童安全：楼层与室内定位实践与未来发展
 Lamt的部署
 无法通过spring initialzr建立spring工程
 [SpringMVC笔记] SpringMVC-09-REST风格简介
 前端入门（一）JavaScript语法、数据类型、运算、函数
 记事小本本
 switch case 语句（详细）
分治算法——快排 | 归并思想
原文地址：https://blog.csdn.net/wenhao_ir/article/details/133901596

Bootstrap的导航栏设计相关知识

目录

01-基础知识