Bootstrap 5 导航语法知识点及案例代码

Bootstrap 5 提供了强大的导航组件，帮助开发者快速构建响应式且美观的导航栏。

一、Bootstrap 5 导航组件概述

Bootstrap 5 提供了多种导航组件，主要包括：

  1. 导航栏（Navbar）：用于网站的主要导航区域，支持响应式设计。
  2. 导航（Nav）：基础的导航组件，可以用于标签页、导航菜单等。
  3. 面包屑导航（Breadcrumb）：显示当前页面的位置路径。

本指南将重点介绍 导航栏（Navbar） 和 导航（Nav） 的使用。

二、导航栏（Navbar）语法知识点

1. 基本结构

<nav class="navbar navbar-expand{-sm|-md|-lg|-xl|-xxl} navbar-light bg-light"><div class="container-fluid"><!-- 品牌/logo --><a class="navbar-brand" href="#">品牌</a><!-- 切换按钮（移动端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button><!-- 导航链接 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">禁用</a></li></ul></div></div>
</nav>

2. 主要类说明

  • navbar：基础类，定义导航栏。
  • navbar-expand{-sm|-md|-lg|-xl|-xxl}：控制导航栏在不同屏幕尺寸下的展开行为。
  • navbar-light / navbar-dark：设置导航栏的文字和图标颜色。
  • bg-light / bg-dark 等：设置导航栏的背景颜色。
  • navbar-brand：品牌或网站名称。
  • navbar-toggler：切换按钮，用于在移动端显示或隐藏导航链接。
  • navbar-collapse：包含导航链接的容器。
  • navbar-nav：导航链接的容器。
  • nav-item：单个导航项。
  • nav-link：导航链接。

3. 响应式设计

通过添加 navbar-expand-{breakpoint} 类，可以控制导航栏在不同屏幕尺寸下的显示方式。例如：

  • navbar-expand-sm：在小屏幕（≥576px）下展开。
  • navbar-expand-md：在中屏幕（≥768px）下展开。
  • navbar-expand-lg：在大屏幕（≥992px）下展开。
  • navbar-expand-xl：在超大屏幕（≥1200px）下展开。
  • navbar-expand-xxl：在超超大屏幕（≥1400px）下展开。

4. 导航栏颜色

Bootstrap 提供了多种预定义的颜色类：

  • navbar-light bg-light：浅色背景，文字为深色。
  • navbar-dark bg-dark：深色背景，文字为浅色。
  • 其他颜色类如 bg-primary, bg-success, bg-danger 等也可使用。

5. 导航栏内容

导航栏可以包含以下内容：

  • 品牌/logo：使用 navbar-brand。
  • 导航链接：使用 nav-link。
  • 下拉菜单：结合 dropdown 组件。
  • 表单元素：如搜索框。
  • 按钮：如登录按钮。

三、导航（Nav）语法知识点

1. 基本结构

<ul class="nav"><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="#" tabindex="-1" aria-disabled="true">禁用</a></li>
</ul>

2. 主要类说明

  • nav：基础类，定义导航。
  • nav-item：单个导航项。
  • nav-link：导航链接。
  • active：表示当前活动的链接。
  • disabled：禁用链接。

3. 对齐方式

  • 左对齐（默认）：

    <ul class="nav">...
</ul>

  • 居中对齐：

    <ul class="nav justify-content-center">...
</ul>

  • 右对齐：

    <ul class="nav justify-content-end">...
</ul>

4. 垂直导航

<ul class="nav flex-column">...
</ul>

5. 导航选项卡（Tabs）

<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>...
</ul>

6. 导航药丸（Pills）

<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>...
</ul>

7. 填充和调整

  • 填充：

    <ul class="nav nav-pills nav-fill">...
</ul>

  • 等宽：

    <ul class="nav nav-pills nav-justified">...
</ul>

四、案例代码

以下是一个包含导航栏和导航链接的完整示例，代码中包含详细注释：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 导航示例</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><!-- 导航栏 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container-fluid"><!-- 品牌 --><a class="navbar-brand" href="#">我的网站</a><!-- 切换按钮（移动端） --><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button><!-- 导航链接 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><!-- 首页 --><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首页</a></li><!-- 关于我们 --><li class="nav-item"><a class="nav-link" href="#">关于我们</a></li><!-- 服务 --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服务</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">服务一</a></li><li><a class="dropdown-item" href="#">服务二</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">其他服务</a></li></ul></li><!-- 联系 --><li class="nav-item"><a class="nav-link" href="#">联系</a></li></ul><!-- 搜索表单 --><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button></form></div></div></nav><!-- 主内容 --><div class="container mt-4"><h1>欢迎来到我的网站</h1><p>这是一个使用 Bootstrap 5 构建的导航栏示例。</p></div><!-- Bootstrap 5 JS 和依赖项 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代码说明

  1. 引入 Bootstrap 5 CSS 和 JS：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件。

  2. 导航栏结构：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">...
</nav>
    • navbar-expand-lg：在大屏幕（≥992px）下展开。
    • navbar-dark bg-dark：深色背景，文字为浅色。

  3. 品牌：

    <a class="navbar-brand" href="#">我的网站</a>

    设置导航栏的品牌名称。

  4. 切换按钮：

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span>
</button>

    在移动端显示一个切换按钮，用于展开或折叠导航链接。

  5. 导航链接：

    <div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav me-auto mb-2 mb-lg-0">...</ul>...
</div>
    • collapse navbar-collapse：包含导航链接的容器，支持响应式折叠。
    • navbar-nav：导航链接的容器。
    • me-auto：将导航链接推到左侧，右侧留出空间给搜索表单。

  6. 下拉菜单：

    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">服务</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">服务一</a></li>...</ul>
</li>

    使用 dropdown 组件创建下拉菜单。

  7. 搜索表单：

    <form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"><button class="btn btn-outline-success" type="submit">搜索</button>
</form>

    使用 Bootstrap 的表单类创建一个搜索框和提交按钮。

  8. 主内容容器：

    <div class="container mt-4">...
</div>

    使用 container 类创建一个响应式容器，并添加顶部外边距。

五、扩展功能

1. 固定导航栏

  • 固定顶部：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">...
</nav>

  • 固定底部：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">...
</nav>

  • 粘性顶部（在滚动时固定）：

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">...
</nav>

2. 颜色主题

Bootstrap 提供了多种颜色主题，可以根据需要选择：

  • bg-primary：主要颜色。
  • bg-secondary：次要颜色。
  • bg-success：成功颜色。
  • bg-danger：危险颜色。
  • bg-warning：警告颜色。
  • bg-info：信息颜色。
  • bg-light：浅色。
  • bg-dark：深色。

3. 导航栏内容对齐

  • 左侧对齐（默认）。

  • 居中对齐：

    <div class="navbar-nav mx-auto">...
</div>

  • 右侧对齐：

    <div class="navbar-nav ms-auto">...
</div>

4. 导航栏中添加按钮

<div class="collapse navbar-collapse" id="navbarNav">...<button class="btn btn-outline-light me-2" type="button">按钮</button><button class="btn btn-primary" type="button">注册</button>
</div>

六、总结

通过以上语法知识点和案例代码，Bootstrap 5 的导航组件应该已经对初学者变得清晰易懂。关键在于理解各个类的用途和组合方式，以及如何利用 Bootstrap 的响应式设计特性来适应不同的设备屏幕。

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

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

相关文章

清除 docker 无用的 镜像/容器

清除 docker 无用的 镜像/容器

清除 docker 无用的 镜像/容器 删除 <none> 的 docker 镜像 使用以下命令删除所有 的 Docker 镜像&#xff08;即悬空镜像 / dangling images&#xff09;&#xff1a; docker image prune -f这会自动删除所有没有 tag 的镜像&#xff08;&#xff09;&#xff0c;不会…
阅读更多...
使用Charles抓包工具提升API调试与性能优化效率

使用Charles抓包工具提升API调试与性能优化效率

在软件开发过程中&#xff0c;网络请求调试和性能优化往往成为开发者遇到的挑战&#xff0c;尤其是在进行API接口调试时。开发者需要确保网络请求的正确性、响应时间以及系统的整体性能。然而&#xff0c;传统的调试方法常常无法提供足够的细节来深入分析问题&#xff0c;进而影…
阅读更多...
如何协调各项目关键节点的冲突与依赖

如何协调各项目关键节点的冲突与依赖

在多项目并行的环境下&#xff0c;关键节点间的冲突与依赖是导致项目延期、资源浪费和沟通误解的主要根源。要高效协调此类问题&#xff0c;企业应重点从建立透明的进度依赖图、使用项目管理工具对齐节点、推动跨部门协同机制入手。其中&#xff0c;通过Gantt图或关键路径法实现…
阅读更多...
mongodb单节点改副本集模式

mongodb单节点改副本集模式

前一阵将三节点的副本集改成了单节点&#xff0c;但后面业务代码出现问题&#xff1a;无法使用事务&#xff0c;因为事务只有在副本集上能用&#xff0c;单节点无法使用&#xff0c;故需要改回副本集模式&#xff0c;而我目前仅有一台服务器&#xff0c;所以考虑在一台服务器上…
阅读更多...
Android 修改了页面的xml布局，使用了databinding，这时候编译时需要用到apt吗

Android 修改了页面的xml布局，使用了databinding，这时候编译时需要用到apt吗

deepseek回答&#xff1a; 在 Android 开发中使用 DataBinding 时&#xff0c;不需要显式使用 apt&#xff08;Annotation Processing Tool&#xff09;。以下是详细说明&#xff1a; 1. DataBinding 的编译机制 DataBinding 是 Android Gradle 插件原生支持的功能&#xff…
阅读更多...
服务器如何从http升级到https（nginx）

服务器如何从http升级到https（nginx）

1.证书申请 可以到阿里云或者华为云去申请证书&#xff0c;申请完下载证书是个压缩包&#xff0c;然后解压 可以到到几个文件夹&#xff0c;找到 .Nginx 文件夹打开 会有两个文件&#xff0c;将这两个文件上传至nginx/conf/cert文件夹下&#xff08;cert需要手…
阅读更多...
6.19_JAVA_微服务

6.19_JAVA_微服务

1、跑后端的时候要把数据库跑起来&#xff0c;否则会报错。 2、predicate断言&#xff1a; 预言&#xff1a;predict 3、gateway&#xff1a;出路口 4、API&#xff1a;List.of("a", "b", "c");把abc编程一个集合。 5、 6、shortcutFieldOrd…
阅读更多...
Linux 基础命令：`ls`、`cd`、`du` 快速入门

Linux 基础命令：`ls`、`cd`、`du` 快速入门

在 Linux 系统中&#xff0c;ls、cd 和 du 是日常操作中最常用的三个命令。掌握它们能大幅提升文件管理效率。 1. ls&#xff1a;查看目录内容 用途&#xff1a;列出当前或指定目录下的文件和子目录。 常用命令&#xff1a; ls -l # 详细列表&#xff08;权限、大…
阅读更多...
408第一季 - 数据结构 - 散列表

408第一季 - 数据结构 - 散列表

散列表 概念 散列表本身就是为了查找 原始人思想 散列表思想 6%5 是 1 1%5 也是1 冲突 冲突怎么办&#xff1f; 线性探测法 就往后找&#xff0c;1跑到索引为2 然后查找&#xff0c;可以发现&#xff0c;只要没冲突就只用查找1次 然后你想找10的话&#xff0c;发现索引为0…
阅读更多...
Spring Boot 集成 Elasticsearch（含 ElasticsearchRestTemplate 示例）

Spring Boot 集成 Elasticsearch（含 ElasticsearchRestTemplate 示例）

Elasticsearch 是一个基于 Lucene 的分布式搜索服务器&#xff0c;具有高效的全文检索能力。在现代应用中&#xff0c;尤其是需要强大搜索功能的系统中&#xff0c;Elasticsearch 被广泛使用。 Spring Boot 提供了对 Elasticsearch 的集成支持&#xff0c;使得开发者可以轻松地…
阅读更多...
CMake实践：指定gcc版本编译和交叉编译

CMake实践：指定gcc版本编译和交叉编译

目录 1.指定gcc版本编译 1.1.通过CMake参数来实现 1.2.使用 RPATH/RUNPATH 直接指定库路径 1.3.使用符号链接和 LD_LIBRARY_PATH 1.4.使用 wrapper 脚本封装 LD_LIBRARY_PATH 2.交叉编译 2.1.基本用法 2.2.工具链文件关键配置 2.3.多平台工具链示例 2.4.注意事项 2.…
阅读更多...
详解鸿蒙Next仓颉开发语言中的全屏模式

详解鸿蒙Next仓颉开发语言中的全屏模式

大家好&#xff0c;今天跟大家分享一下仓颉开发语言中的全屏模式。 和ArkTS一样&#xff0c;仓颉的新建项目默认是非全屏模式的&#xff0c;如果你的应用颜色比较丰富&#xff0c;就会发现屏幕上方和底部的留白&#xff0c;这是应用自动避让了屏幕上方摄像头区域和底部的导航条…
阅读更多...
LoRA 浅析

LoRA 浅析

1. 核心思想 LoRA 是一种参数高效的微调方法&#xff0c;旨在减少微调大型语言模型 (LLMs) 所需的计算资源和存储空间。其核心思想是&#xff1a; 冻结预训练模型权重&#xff1a; 在微调过程中&#xff0c;保持预训练 LLM 的原始权重不变。引入低秩矩阵&#xff1a; 对于 LL…
阅读更多...
软件范式正在经历第三次革命

软件范式正在经历第三次革命

核心主题&#xff1a;软件范式正在经历第三次根本性革命&#xff08;软件3.0&#xff09;&#xff0c;其核心是“智能体”&#xff08;Agent&#xff09;&#xff0c;未来十年将是“智能体的十年”。 逻辑模块解析&#xff1a; 软件的三次重生革命 软件1.0&#xff1a; 传统编…
阅读更多...
JavaScript 变量与运算符全面解析：从基础到高级应用

JavaScript 变量与运算符全面解析：从基础到高级应用

昨天学长说可以放缓一下学习进度,刚好最近期末复习也不是很紧张,所以来重新复习一下js的一些知识点。 一&#xff1a;变量 &#xff08;1&#xff09;变量声明 来简单看一下变量的一些知识点。首先是变量声明&#xff1a;变量声明尽量使用数组字母下划线 来举几个例子&#x…
阅读更多...
移动语义对性能优化的具体示例

移动语义对性能优化的具体示例

前言 本文章对比了&#xff1a;小中大字符串在普通传值、传值移动、传左值引用、传右值引用、模板完美转发、内联版本等多种测试&#xff0c;对比各个方式的性能优异&#xff1a; 测试代码1 #include <iostream> #include <string> #include <chrono> #incl…
阅读更多...
C/C++ 和 OpenCV 来制作一个能与人对弈的实体棋盘机器人

C/C++ 和 OpenCV 来制作一个能与人对弈的实体棋盘机器人

项目核心架构 整个系统可以分为四个主要模块&#xff1a; 视觉感知模块 (Vision Perception Module): 任务: 使用摄像头“看懂”棋盘。工具: C, OpenCV。功能: 校准摄像头、检测棋盘边界、进行透视变换、分割 64 个棋盘格、识别每个格子上的棋子、检测人类玩家的走法。 决策模…
阅读更多...
SpringBoot扩展——日志管理！

SpringBoot扩展——日志管理！

Spring Boot扩展 在Spring Boot中可以集成第三方的框架如MyBatis、MyBatis-Plus和RabbitMQ等统称为扩展。每一个扩展会封装成一个集成&#xff0c;即Spring Boot的starter&#xff08;依赖组件&#xff09;。starter是一种非常重要的机制&#xff0c;不需要烦琐的配置&#xf…
阅读更多...
【JSON-To-Video】AI智能体开发：为视频图片元素添加动效（滑入、旋转、滑出），附代码

【JSON-To-Video】AI智能体开发：为视频图片元素添加动效（滑入、旋转、滑出），附代码

各位朋友们&#xff0c;大家好&#xff01; 今天要教大家如何在 JSON - To - Video 中为视频内图片元素添加滑入、旋转、滑出的动效。 如果您还不会封装制作自己的【视频工具插件】&#xff0c;欢迎查看之前的教程&#xff01; AI智能体平台&#xff0c;如何封装自定义短视频…
阅读更多...
Spring Boot(九十二)：Spring Boot实现连接不上数据库就重启服务

Spring Boot(九十二)：Spring Boot实现连接不上数据库就重启服务

场景： 在线上部署时，若服务器因断电等原因意外重启，项目及其依赖的数据库服务通常需要配置为自动启动。此时，如果数据库服务启动较慢或失败，Spring Boot 项目会因无法建立数据库连接而启动失败。 需求： 为确保项目启动成功，需要让 Spring Boot 项目等待数据库服务完全就…
阅读更多...
最新文章

Copyright @ 2022~2023