Bootstrap5 导航栏

已于 2024-09-01 13:42:27 修改
阅读量788 收藏 9
点赞数 4
文章标签： bootstrap 前端
于 2024-09-01 13:38:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141781557
版权

https://getbootstrap.com/docs/5.3/components/navbar/

基础导航栏

通过.navbar类可以创建一个标准的导航栏。

若要创建响应式的导航栏，可以在.navbar类的基础上添加类.navbar-expand-*，其中*替换为断点名称，例如.navbar-expand-lg。

导航栏上的选项可以使用<ul>元素并添加.navbar-nav类，然后在<li>元素上添加.nav-item类，在<a>元素上使用.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">
    <nav class="navbar bg-info navbar-expand-sm">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link">前端框架</a></li>
        <li class="nav-item"><a href="#" class="nav-link">后端框架</a></li>
        <li class="nav-item"><a href="#" class="nav-link">我的</a></li>
      </ul>
    </nav>
  </div>

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

</html>

<576px时，垂直显示：
在这里插入图片描述

≥576px时水平显示：
在这里插入图片描述

垂直导航栏

不添加navbar-expand-*类可以创建始终垂直的导航栏：

<!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">
    <nav class="navbar bg-info">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link">前端框架</a></li>
        <li class="nav-item"><a href="#" class="nav-link">后端框架</a></li>
        <li class="nav-item"><a href="#" class="nav-link">我的</a></li>
      </ul>
    </nav>
  </div>

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

</html>

在这里插入图片描述

彩色导航栏

可以使用.bg-*类（例如bg-info）来更改导航栏的背景颜色。

  • 注意：.navbar-dark类已经弃用，而是采用data-bs-theme="dark"。将data-bs-theme="dark"增加到.navbar。
  • 注意：.navbar-light类已经弃用

https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes
在这里插入图片描述

data-bs-theme="dark"

在这里插入图片描述

在这里插入图片描述

品牌

https://getbootstrap.com/docs/5.3/components/navbar/#brand

.navbar-brand类用于突出显示页面的品牌/标识/项目名称。

在这里插入图片描述

在这里插入图片描述

固定导航栏

https://getbootstrap.com/docs/5.3/components/navbar/#placement

导航栏也可以固定在页面的顶部或底部。固定导航栏会在独立于页面滚动的固定位置（顶部或底部）保持可见。

  • .fixed-top类使导航栏固定在页面的顶部
  • .fixed-bottom类使导航栏固定在页面的底部

固定在页面顶部

在这里插入图片描述

完整示例代码：

<!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">
  <style>
    body {
      padding-top: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-sm bg-dark fixed-top" data-bs-theme="dark">
      <div class="container-fluid">
        <a href="#" class="navbar-brand">Logo</a>
      </div>
    </nav>

    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>

  </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">
  <style>
    body {
      padding-top: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <nav class="navbar navbar-expand-sm bg-dark fixed-bottom" data-bs-theme="dark">
      <div class="container-fluid">
        <a href="#" class="navbar-brand">Logo</a>
      </div>
    </nav>

    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>

  </div>

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

</html>

在这里插入图片描述

导航栏粘在顶部

使用.navbar元素上的.sticky-top类来创建随页面滚动直到到达顶部，然后停留在那里的粘性顶部导航栏。

在这里插入图片描述

完整示例代码：

<!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">
  <style>
    body {
      padding-bottom: 100px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="bg-warning p-5">开学第一课</div>

    <nav class="navbar navbar-expand-sm bg-dark sticky-top" data-bs-theme="dark">
      <div class="container-fluid">
        <a href="#" class="navbar-brand">Logo</a>
      </div>
    </nav>

    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>
    <p>大前端的出现是为了解决传统前端开发和后端开发之间的界限问题。</p>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>
    <p>如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富</p>

  </div>

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

</html>

在这里插入图片描述

在这里插入图片描述

听海边涛声
关注
19Bootstrap5导航栏
醉瑾_的博客
12-18 1300
19Bootstrap5导航栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5导航栏</title> <link rel="s
Bootstrap 5 导航
最新发布
wjs2024的博客
07-26 344
Bootstrap 5 提供了一套完整的导航组件，包括导航栏（Navbar）、选项卡（Tabs）、胶囊（Pills）、面包屑（Breadcrumbs）和分页（Pagination）。这些组件设计用于创建直观且易于导航的用户界面。
Bootstrap v5 Navigation Bar 导航栏
SimonHeeeee的博客
10-18 717
Bootstrp 5 CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> Navigation Bar
Bootstrap-05-插件——导航
Void的博客
03-02 192
导航 使用下拉和按钮组合可以制作导航 基本样式：.nav 与nav-tab、nav-pills组合制作导航 分类： 标签型（nav-tab）导航 胶囊型（nav-pills）导航 堆栈（nav-stacked）导航 自适应（nav-justified）导航 面包屑（breadcrumb）导航，单独使用，不与nav一起使用，主要作用：提醒用户当前位置 状态： 选中状态 active样式 禁用状态：disable 二级菜单 演示 <p class="lead">标签式的导航
bootstrap5导航栏
oldhelps的CSDN博客
09-20 781
使用这样的导航（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
Bootstrap 5 导航栏
wjs2024的博客
06-11 414
Bootstrap 5 是一个流行的前端框架，用于快速开发响应式和移动设备优先的网页。导航栏是网页设计中非常重要的组成部分，它帮助用户浏览网站并找到他们需要的信息。在 Bootstrap 5 中，创建一个美观且功能齐全的导航栏变得非常简单。本文将详细介绍如何使用 Bootstrap 5 来创建导航栏，包括基本结构、样式定制和响应式设计。
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
总结起来，通过理解Bootstrap的响应式设计和CSS3的特性，我们可以自定义Bootstrap导航栏，创建出适应各种设备的侧边导航栏。这个过程涉及到定位、响应式工具类、CSS3变换和过渡效果的运用，以及对不同设备视口的适配...
bootstrap侧边导航栏
07-25
侧边导航栏是Bootstrap中一个常见的元素，它通常用于网站或应用的左侧，用于展示主要的导航选项。在这个场景中，我们将深入探讨如何使用Bootstrap来创建一个简洁且功能完备的侧边导航栏。 首先，为了实现侧边导航栏...
基于bootstrap实现收缩导航条
12-03
在本文中，我们将深入探讨如何使用Bootstrap来实现一个可收缩的导航条。 首先，Bootstrap的核心在于其响应式布局设计，这主要得益于`<meta>`标签的设置。在提供的代码中，我们看到以下两行关于`viewport`的元标签：...
bootstrap5-offcanvas-navbar：Bootstrap5：画布导航栏
02-15
bootstrap5-offcanvas-navbar：Bootstrap5：画布导航栏
5个不同样式bootstrap导航菜单模板
11-13
bootstrap,导航,菜单,HTML5,模板.
一个炫酷的Bootstrap导航菜单
08-31
主要为大家详细介绍了一个炫酷的Bootstrap导航菜单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
23种bootstrap导航菜单布局
01-08
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。
Bootstrap 5-导航栏-可折叠导航栏
m0_73839298的博客
09-25 1434
可折叠导航栏代码图效果图。
Html 5/CSS 的学习（二） —— Bootstrap 导航栏
06-02 1515
参考 Bootstrap 导航栏0. 导航栏类别 （1）默认导航栏：class=”navbar navbar-default”； （2）响应式导航栏：要折叠的内容必须包裹在class=”collapse navbar-collapse” 的 div 中。折叠起来的导航栏实际上是一个带有： class=”navbar-toggle” data_toggle：用于告诉 JavaScript 需要对按钮
Bootstrap导航条源码解析
"Bootstrap源码解读导航条，深入解析了如何构建和自定义Bootstrap的导航条组件，提供了基础导航条的实现代码，并展示了导航条颜色和样式的控制方法。" Bootstrap是一个广泛使用的前端开发框架，它提供了一系列预设...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值