Bootstrap中按钮组，输入框组总结

叶子桑桑 叶子桑桑 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 600+累计阅读 698平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-02-16 17:00:45 发布 698 阅读 AI 写同款· GEO 优化 ›
Bootstrap 组件：按钮组件的使用 作者:WangMin 格言:努力做好自己喜欢的每一件事 优快云原创文章 博客地址 ???? WangMin 通过按钮组容器（.btn-group）把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。 注意： 按钮组中的工具提示和弹出框需要特别的设置。当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。 确保设置正确的role属性 阅读详情

总览

在这里插入图片描述

按钮组

按钮组允许多个按钮被堆叠在同一行上。当把按钮对齐在一起时，非常有用。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div>
.btn-toolbar该 class 有助于把几组
结合到一个
中，一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。<div class="btn-group-vertical"> ... </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
  • 按钮工具栏
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
  • 按钮的大小
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
    <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
    <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
  • 嵌套
    在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>
  • 垂直的按钮组
<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

输入框组

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如， 可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

  1. 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  2. 在相同的
    内，在 class 为 .input-group-addon 的 内放置额外的内容。
  3. 把该 放置在 元素的前面或者后面。
  • 基本的输入框组
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
  • 输入框组的大小
    向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
    </form>
</div>
  • 复选框和单选插件
    把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 按钮插件
    把按钮作为输入框组的前缀或者后缀元素，此时就不是添加 .input-group-addon class，使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 带有下拉菜单的按钮
    在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
  • 分割的下拉菜单按钮
    在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能。
<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">功能</a>
                            </li>
                            <li>
                                <a href="#">另一个功能</a>
                            </li>
                            <li>
                                <a href="#">其他</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">分离的链接</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>
收录于
JS

当前文章被收录于：

JS
16 篇文章 0 人学习

JS的知识点和案例啦~

订阅专栏 查看详情
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Bootstrap4 输入框组 输入框组是 Bootstrap 4 中的一种表单组件，它可以将输入框（如文本框、选择框等）与其他元素（如按钮、标签等）组合在一起，形成更加复杂的表单布局。将输入框与标签、说明文字、按钮等元素组合在一起。为输入框添加边框和背景色，以突出显示表单元素。使用输入框组提供的前后缀来增强输入框的视觉效果。输入框组是 Bootstrap 4 中一个非常有用的功能，可以帮助开发者快速实现丰富的表单布局。通过使用输入框组，我们可以轻松地组合输入框与其他元素，实现各种功能。 阅读详情

相关推荐

【Bootstrap】可复用的组件

一、字体图标 二、下拉菜单 三、按钮组 四、输入框组

早睡早起长头发的博客 1019

Bootstrap组件——输入框

输入框一、输入框1.基本2.尺寸3.多选框和单选框4.多个输入框与多个额外组件5.按钮组合6.带下拉列表的按钮组合7.分离式按钮8.自定义表单组合9.自定义文件 一、输入框 1.基本 <div class="form-row"> <div class="col"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="in

xun__xing的博客 2869

Bootstrap4 小工具

Bootstrap4 是 Bootstrap 的第四个主要版本，它于2018年1月发布。Bootstrap4 带来了许多新特性，包括改进的网格系统、新的组件、增强的定制选项等。响应式设计：Bootstrap4 继承了 Bootstrap3 的响应式设计理念，使得网页在不同设备上都能良好展示。组件丰富：Bootstrap4 提供了大量的组件，如按钮、表单、导航栏等，方便开发者快速构建网页。定制化：Bootstrap4 提供了丰富的定制选项，开发者可以根据自己的需求调整样式和功能。兼容性。

csbysj2020 324

WEB前端网页设计-Bootstrap 输入框组

输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

君逍遥o 2343

Bootstrap5 输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。.input-group-text 类来设置文本的样式。。

shengyin714959的博客 427

某盾blackBox逆向——纯算

某盾blackBox逆向——纯算

Lzyydsb的博客 5891

3.5 Bootstrap 输入框组

注意：为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加。

梁辰兴的博客 1591

读取rosbag中的IMU信息并转为tum格式的csv和txt

rostopic -b xx.bag -p /xx > xxx.txt #for euroc structvio import os, sys,re,csv name="street_07" # basedir="/media/yinjie/2498AF1F98AEEF0C/adataset/15results/imu_bagtxt/"+name+'.txt' # txtdir="/media/yinjie/2498AF1F98AEEF0C//adataset/15results/imu_o

qq_42928559的博客 1919

bootstrap带有下拉按钮的输入框_bootstrap输入框组件使用方法详解

本文实例为大家分享了bootstrap输入框组的具体使用方法，供大家参考，具体内容如下1、基本用法我们有时需要在输入框一侧或两侧添加额外的元素这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以但是每个输入框组只能有一个input@.00$.002、尺寸给最外层的.input-group添加.input-group-lg.input-group-sm.input-grou...

weixin_36079387的博客 1072

BK3296蓝牙音频SoC深度评测：如何用这颗芯片打造超低功耗TWS耳机？

本文深度评测BK3296蓝牙音频SoC在TWS耳机中的应用，重点解析其22nm工艺带来的超低功耗优势（A2DP模式仅2.8mA）和3×3mm封装设计。通过芯片架构分析、双麦降噪调优及开发套件使用指南，为工程师提供打造高性能TWS耳机的完整解决方案，显著提升续航和音频质量。

rice5的博客 654

Yolov5自学笔记之一--从入门到入狱，功能强大不要乱用（实现yolov5的基本功能使用流程及训练自己的数据集）

零基础自学yolov5，学会简单使用和训练自己的数据集，在自己工作中使用

qq_41597915的博客 1万+

Bootstrap组件学习笔记（二）——按钮组和输入框组

目录     1.按钮组     2.输入框组 1.按钮组      1.1 总结  1.2 示例代码 1html>2html>3head lang="en">4    meta charset="UTF-8">5    title>组件title>6    7    link href="css/bootstr

Andy_lau 2524

D触发器（D Flip-Flop）与D锁存器（D Latch）

在解释这个练习题之前，我们先来简单回顾一下D触发器（D flip-flop）和D锁存器（D latch）的概念，以及它们在数字电路中的作用。这将帮助我们理解所提到的练习。

weixin_65190179的博客 9158

Bootstrap组件：图标 按钮组 输入框组 导航 面板

图标、按钮组、输入框组、导航、面板

锦鲤姑娘的博客 583

MIA文献阅读 —— 深度学习在医学图像分析中的最新进展及临床应用【2024】_再现性；深度学习

coderVAEVAEVAE) (Kingma威林,2014)在概率性的工作方式学习观测数据之间的映射空间x∈Rmx∈R^mx∈Rm 和潜在的空间z∈Rnmnz∈Rn(m>>n)。作为一个潜变量模型，VAEVAEVAE制定这个问题作为观察样品的最大化对数似logpxlog∫px∣zpzdzpx∣zp (x | z)p(x∣z)可以很容易地使用神经网络建模，和pzp (z)

2401_84181704的博客 1241

Dify 第 4 篇 Dify 示例：数据库执行Agent

本文介绍了如何在Dify平台创建一个能够执行SQL查询的数据库Agent。通过安装并配置"通义千问"和"数据库"两个插件，实现自然语言到SQL语句的转换和执行。关键步骤包括：1）安装插件并配置API Key；2）设置默认数据库连接（建议使用只读账号）；3）准备测试数据表结构。该Agent支持通过工具调用查询表结构、转换自然语言为SQL、执行查询并返回结果，同时提供了CSV查询和HTTP API接口功能。文中还提供了MySQL测试数据表的创建脚本和示例数据。

甘蓝的专栏 1156

【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组

一、菜单组 1、概述 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为； 2、基本实例 用.btn 在.btn-group 中包装一系列按钮； 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.

訾博（ZiBo）的博客 865

YOLOv11改进 | 损失函数改进篇 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

这篇文章介绍了YOLOv11的重大改进，特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体，如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU，还融合了“Focus”思想，创造了一系列新的损失函数。这些组合形式的损失函数超过了二十余种，每种都针对特定的目标检测挑战进行优化。文章会详细探讨这些损失函数如何提高YOLOv11在各种检测任务中的性能，包括提升精度、加快收敛速度和增强模型对复杂场景的适应性。

Snu77的博客 6189

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等，可在创建的窗口进行控制

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

bootstrap2和bootstrap3的用法区别概述（二）

bootstrap2和bootstrap3的用法区别概述（二）一 、下拉菜单1. 3中通过为下拉菜单父元素设置.dropup类，让菜单向上弹出，不设置类默认状态下是向下弹出。2. 下拉菜单对齐，右对齐为例，2中用.pull-right类，3中用.dropdown-menu-right类。但3中触发按钮如需要右对齐仍然用.pull-right类，注意在外层div中加。3....

weixin_34279061的博客 167

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具，可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

bootstrap中输入框组的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap中的输入框组</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <sc.

weixin_42289273的博客 386

文档：亲测可用解决vnc灰屏，黑屏，鼠标大黑叉情况

主要解决vnc-viewer灰屏，黑屏，鼠标大黑叉等现象，详细见文档。

Bootstrap 输入框组

一、Bootstrap4 输入框组 1.1 基本输入框组 我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。 使用.input-group-prepend 类可以在输入框的的前面添加文本信息，.input-group-append 类添加在输入框的后面。 最后，我们还需要使用.input-group-text 类来设置文本的样式。 <!DOC...

书香水墨 1317

Bootstrap 小记（2）（组件）

1 字体图标 用法： 放在一对不包含任何文本的 span 标签内， 一般要放在其他标签例如button标签中使用 。添加 aria-hidden = 'true' 使它不被读出来 ，也可以 设置 aria-label = 'a' 使它读出来 a 样式类名去https://v3.bootcss.com/components/查找 2 下拉菜单 .dropup 向上弹出 .dropdown...

weixin_42042250的博客 228

BootStrap（二）

BootStrap（二）下面是对BootStrap一些组件的介绍1.定制的字体 常用的类是 glyphicon glyphicon-x 太多了具体的看菜鸟教程中2.下拉菜单 下单菜单的使用：首先外层定义一个div class为dropdown 内层定义一个button button的class为dropdown-toggle 同时设置button的data-toggle=’dr

千里之行始于足下 448
上一篇： Bootstrap中字体图标，上下拉菜单总结
下一篇： Bootstrap中布局组件总结
点赞 2
评论 0
书签 书签 1
叶子桑桑
叶子桑桑
博客等级 码龄9年 18粉丝 111原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值