Bootstrap5 导航

于 2024-09-01 10:13:07 发布
阅读量130 收藏 4
点赞数 2
文章标签： bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141774621
版权

https://getbootstrap.com/docs/5.3/components/navs-tabs/

Bootstrap中的导航具有通用的标记和样式，从基本的.nav类到活动和禁用状态。

基本的.nav组件使用flexbox构建，为构建各种类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于与列表一起工作）、一些链接内边距以增大点击区域，以及基本的禁用样式。

创建基本导航

要创建基本的水平菜单，可以将.nav类添加到<ul>元素，然后为每个<li>元素添加.nav-item类，并将.nav-link类添加到它们的链接元素。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav">
      <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" href="#">后端框架</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

导航对齐

在这里插入图片描述

在这里插入图片描述

禁用链接

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav justify-content-center">
      <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" href="#">后端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

垂直导航栏

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav flex-column justify-content-center">
      <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" href="#">后端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

选项卡式导航

https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs

添加类.nav-tabs 到基本导航来生成选项卡式的导航，并将.active类添加到活动/当前链接。

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <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 disabled">课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

选项卡导航中添加了字体图标

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

胶囊式导航

https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills

在基本导航的基础中添加.nav-pills类来创建胶囊式导航。
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

等宽的选项卡

使用.nav-justified，所有水平空间都将被导航链接占据，每个导航项的宽度都将相同。

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-pills nav-justified">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-house"></i> 首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#"> <i class="bi bi-book-half"></i> 前端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="bi bi-book"></i> 后端框架</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"><i class="bi bi-hourglass"></i> 课程开发中</a>
      </li>
    </ul>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

听海边涛声
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 5 导航
wjs2024的博客
07-26 313
Bootstrap 5 提供了一套完整的导航组件，包括导航栏（Navbar）、选项卡（Tabs）、胶囊（Pills）、面包屑（Breadcrumbs）和分页（Pagination）。这些组件设计用于创建直观且易于导航的用户界面。
Bootstrap 5 导航栏
wjs2024的博客
06-11 394
Bootstrap 5 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。导航栏是网页设计中非常重要的组成部分，它帮助用户浏览网站并找到他们需要的信息。在 Bootstrap 5 中，创建一个美观且功能齐全的导航栏变得非常简单。本文将详细介绍如何使用 Bootstrap 5 来创建导航栏，包括基本结构、样式定制和响应式设计。
Bootstrap5 导航栏
T0620514的博客
12-14 1098
Bootstrap5 导航栏
Bootstrap5 导航栏讲解
qq_65552364的博客
06-04 7764
通过类 .navbar 可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在类 .navbar 的基础上添加类 .navbar-expand-xxl|xl|lg|md|sm 来创建 (大屏幕水平铺开，小屏幕垂直堆叠)。 navbar-dark / light‎ 可以调节导航栏文本颜色，如深色背景导航栏对应浅色文本、浅色导航栏对应深色文本。‎ data-bs-toggle 指以什么类型事件触发 data-bs-target 指事件的目标 就是样式的具体细节具体的代码 dropdown-divider
bootstrap5导航栏
oldhelps的CSDN博客
09-20 767
使用这样的导航（bootstrap 5） 更多 *** html OLD HELPS <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"&gt
23种bootstrap导航菜单布局
01-08
在这个主题“23种bootstrap导航菜单布局”中，我们将深入探讨如何利用Bootstrap的组件和jQuery插件来创建多种导航菜单效果。 首先，Bootstrap的导航菜单主要基于`<nav>`和`<ul>`元素构建，通过应用不同的类（如`....
Bootstrap入门书籍之（五）导航条、分页导航
09-02
5. **二级菜单**：Bootstrap的导航条支持嵌套的下拉菜单，通过`.dropdown`和`.dropdown-toggle`类以及`data-toggle="dropdown"`属性实现。当用户点击链接时，下拉菜单会展开。例如： ```html ...
Bootstrap多级导航栏(级联导航)的实现代码
09-02
在Bootstrap中，导航栏（Navbar）是常用的设计元素，用于展示网站的主要部分和链接。然而，官方提供的导航栏默认支持最多两级菜单。当需要创建多级（如三级或更多级）的导航时，我们需要借助额外的插件或自定义代码...
Window Performance API
Bruce__taotao的博客
08-28 1444
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
前端的面试题
本人小可爱
08-30 194
【代码】前端的面试题。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 547
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue ref和reactive区别
灰海
08-25 5353
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 662
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 2162
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
前端开发学习Docker记录02容器操作
第⑦个前端
08-29 3093
使用docker ps 可以看到有哪些镜像在运行。
JavaWeb——前端工程化
m0_50460160的博客
08-30 555
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1153
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
前端学习Day36
最新发布
2401_83657100的博客
08-31 150
同样的将变量和函数组合到了一起并能通过this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。我们可以把那些不变的方法，直接定义在 prototype对象上，这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的this 指向构造函数和原型对象中的this都指向实例化的对象。构造函数和原型对象中的this 都指向实例化的对象。构造函数体现了面向对象的封装特性；
bootstrap5侧边导航栏
05-14
Bootstrap 5 中的侧边导航栏使用 `Nav` 和 `Navs` 组件实现，以下是一个简单的示例代码： ```html <div class="container-fluid"> <div class="row"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <div class="position-sticky pt-3"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#"> <span data-feather="home"></span> Dashboard </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file"></span> Orders </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="shopping-cart"></span> Products </a> </li> </ul> </div> </nav> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group me-2"> <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> <span data-feather="calendar"></span> This week </button> </div> </div> <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> </main> </div> </div> ``` 在这个示例中，侧边导航栏位于左侧，使用 `nav flex-column` 和 `nav-item` 类实现垂直布局，每个导航项都是一个 `a` 标签。右侧的主内容区域使用 `main` 标签包含，可以放置页面的主要内容。 更多关于 Bootstrap 5 导航栏的信息可以查看官方文档：https://getbootstrap.com/docs/5.0/components/navbar/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值