bootstrap入门

已于 2023-08-08 15:14:48 修改
阅读量232 收藏 1
点赞数 1
分类专栏： vue 文章标签： bootstrap 前端 html
于 2023-08-07 22:00:53 首次发布
原文链接：https://blog.csdn.net/qq_21277357/article/details/132155424?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132155424%22%2C%22source%22%3A%22qq_21277357%22%7D
版权

名词

sm表示小屏幕，md表示中等屏幕,lg表示大屏幕，xl表示加大屏幕，xxl表示特大屏幕

下载js和css

下载 Bootstrap · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

容器

新建index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <div class="container">Hello, world!</div>
  
</body>

</html>

.container是一个响应性的、固定宽度的容器,是bootstrap自带的样式

    <div class="container-sm">100%宽，直到小断点</div>
    <div class="container-md">100%宽，直到中等断点</div>
    <div class="container-lg">100%宽，直到大断点</div>
    <div class="container-xl">100%宽，直到加大断点</div>
    <div class="container-xxl">100%宽，直到特大断点</div>

 格子

一行有12个格子，col

创建3个等宽的列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
        }
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  -->
    <div class="container">
        <!--row 是行-->
        <div class="row ">
            <!--col是列   biankuang是我们自己写的-->
            <div class="col biankuang">a</div>
            <div class="col biankuang">b</div>
            <div class="col biankuang">c</div>
            
        </div>
        
    </div>
  
</body>

</html>

col-5,-col-6所占的宽度

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
   <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
        }
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  -->
    <div class="container">
        <!--row 是行-->
        <div class="row ">
            <!--col是列   biankuang是我们自己写的-->
            <div class="col biankuang">a</div>
            <div class="col-6 biankuang">col-6占一半的宽度</div>
            <div class="col biankuang">c</div>
        </div>
        
        <div class="row ">
            <!--col是列   biankuang是我们自己写的-->
            <div class="col biankuang">a</div>
            <div class="col-5 biankuang">col-5占41.6%的宽度</div>
            <div class="col biankuang">c</div>
        </div>
    </div>
  
</body>

</html>

col-md-auto和col-xl-auto

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
        }
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  -->
    <div class="container">
        <!--row 是行-->
        <div class="row ">
            <!--col是列   biankuang是我们自己写的-->
            <div class="col-lg-2 biankuang">2个单元格,宽度占16.6%</div>
            <div class="col-md-auto biankuang">中等屏幕可变宽度</div>
            <div class="col col-lg-2 biankuang">2个单元格,宽度占16.6%</div>
        </div>
        
        <div class="row ">
            <!--col是列   biankuang是我们自己写的-->
            <div class="col-lg-2 biankuang">2个单元格,宽度占16.6%</div>
            <div class="col-xl-auto biankuang">加大屏幕可变宽度</div>
            <div class="col-lg-2 biankuang">2个单元格,宽度占16.6%</div>
        </div>
    </div>
  
</body>

</html>

 

col-8和col-4

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
   <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
        }
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  -->
    <div class="container">
        <div class="row">
            <div class="col biankuang">1</div>
            <div class="col biankuang">2</div>
            <div class="col biankuang">3</div>
            <div class="col biankuang">4</div>
        </div>
        <div class="row">
            <div class="col-8 biankuang">占8个格子</div>
            <div class="col-4 biankuang">占4个格子</div>
        </div>
    </div>
  
</body>

</html>

row-cols每行多少列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
   <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
        }
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  -->
    <div class="container">
        <!--row-cols-1 分成每行1列-->
        <!--row-cols-2 分成每行2列-->
        <!--row-cols-3 分成每行3列-->
        <div class="row row-cols-2">
            <div class="col biankuang">1</div>
            <div class="col biankuang">2</div>
            <div class="col biankuang">3</div>
            <div class="col biankuang">4</div>
        </div>
       
    </div>
  
</body>

</html>

列

侧轴对齐方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*定义边框*/
        .biankuang{
            border: 1px solid;
            height: 100px;
        }
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <!--container是容器  text-center 文字居中对齐-->
    <div class="container text-center">
        <!--align-items-start 侧轴的起始位置-->
        <!--align-items-center 侧轴的中间位置-->
        <!--align-items-end 侧轴的结束位置-->

       <div class="row align-items-end">
            <div class="col biankuang ">1</div>
            <div class="col biankuang ">1</div>
            <div class="col biankuang ">1</div>
            
       </div>
       
    </div>
  
</body>

</html>

水平对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
       
        .row div{
            border: 1px solid;
            height: 50px;
        }
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <div class="container">
        <!--justify-content-start 水平对齐方式 开始位置-->
         <div class="row justify-content-start">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
          <!--justify-content-center 水平对齐方式 居中位置-->
          <div class="row justify-content-center">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
          <!--justify-content-end 水平对齐方式 结束位置-->
          <div class="row justify-content-end">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
          <!--justify-content-around 水平对齐方式 均匀的分布在一行 项目与项目之间是边缘的2倍-->
          <div class="row justify-content-around">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
          <!--justify-content-between 水平对齐方式 均匀的分布在一行 项目与项目之间距离相对 
            项目距离边缘没有距离-->
          <div class="row justify-content-between">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
          <!--justify-content-evenly 水平对齐方式 均匀的分布在一行-->
          <div class="row justify-content-evenly">
            <div class="col-4">1</div>
            <div class="col-4">2</div>
          </div>
      </div>
  
</body>

</html>

列排序

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
       
        .row div{
            border: 1px solid;
            height: 50px;
        }
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col  order-last">排在最后</div>
            <div class="col  ">2</div>
            <div class="col  order-first">排在第一个</div>
        </div>
    </div>
  
</body>

</html>

向右偏移格子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
       
        .row div{
            border: 1px solid;
            height: 50px;
        }
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4  offset-md-4">向右偏移4个格子</div>
        </div>
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3  offset-md-3">向右偏移3个格子</div>
        </div>
        <div class="row">
            <div class="col-md-2">1</div>
            <div class="col-md-2  offset-md-2">向右偏移2个格子</div>
        </div>
    </div>
  
</body>

</html>

同级列分离

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
       
        .row div{
            border: 1px solid;
            height: 50px;
        }
        
    </style>
     
     <script>
     
     </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">1</div>
            <div class="col-md-4  ms-auto">紧挨着右边</div>
        </div>
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3  ms-md-auto">紧挨着右边</div>
        </div>
        
    </div>
  
</body>

</html>

class="clearfix"清除浮动

导航条

  • .navbar-brand您的公司、产品或项目名称。
  • .navbar-nav对于全高和轻量级导航(包括支持下拉)。
  • .navbar-toggler使用我们的折叠插件和其他导航切换行为。
  • 用于任何表单控件和动作的Flex和spacing实用程序。
  • .navbar-text用于添加垂直居中的文本字符串。
  • .collapse.navbar-collapse用于按父断点分组和隐藏导航栏内容。
  • 添加可选的.navbar-scroll设置一个max-height和滚动展开的导航栏内容.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
        /*悬浮的时候把菜单显示出来*/
       .xiaLa:hover ul{
            display: block;
       }
         
        
    </style>
     
     <script>
        
     </script>
</head>
<body>

        
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container">
              <a class="navbar-brand" href="#">导航栏</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <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 xiaLa">
                    <a class="nav-link dropdown-toggle" href="#" 
                    role="button">
                      下拉菜单
                    </a>
                    <ul class="dropdown-menu  ">
                      <li><a class="dropdown-item" href="#">菜单1</a></li>
                      <li><a class="dropdown-item" href="#">菜单2</a></li>
                      <li><a class="dropdown-item" href="#">菜单3</a></li>
                    </ul>
                  </li>
                  
                </ul>
                <form class="d-flex" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
    
  
</body>

</html>

 

可以把导航栏文字替换成图片

设置导航条背景色

bg-primary 设置蓝色

data-bs-theme 设置文字颜色

 

 bg-dark 设置背景黑色

data-bs-theme 设置文字颜色

 

 

轮播图

自动播放

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
       
         
        
    </style>
     
     <script>
    
    </script>
</head>
<body>

    <div class="container">
        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" >
            <div class="carousel-inner">
                <!--active 必须要加在第一个上,否则不显示-->
              <div class="carousel-item active">
                <img src="./aaa.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./bbb.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="./ccc.jpg" class="d-block w-100" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </div>
  
</body>

</html>

如果不写data-bs-ride="carousel"，那么不会自动播放

卡片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
         
        
    </style>
     
     <script>
        
     </script>
</head>
<body>

        
    <div class="card" style="width: 18rem;">
        <img src="./喜羊羊.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">标题</h5></h5>
          <p class="card-text">文字内容</p>
          <a href="#" class="btn btn-primary">按钮</a>
        </div>
      </div>
  
</body>

</html>

按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入bootstrap的css和js-->
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./bootstrap.js"></script>
    <style>
         
        
    </style>
     
     <script>
        
     </script>
</head>
<body>

    <button type="button" class="btn btn-primary">蓝色</button>
    <button type="button" class="btn btn-danger">#dc3545</button>
    <button type="button" class="btn btn-warning">黄色</button>
    <button type="button" class="btn btn-success">#198754</button>
  
</body>

</html>

 

我是一只代码狗
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap入门
梦想是很难很难的，所以先勇敢一点
03-25 2057
介绍 Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。 作用 Bootstrap 使得 Web 开发更加快捷，高效。 BootStrap支持响应式开发，解决了移动互联网前端开发问题 什么是响应式布局、响应式布局能够解决的问题 响应式布局：一个网站的展示能够兼容多个终端(手机
cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl
热门推荐
m0_49471668的博客
06-26 2万+
前端为了页面在不同大小的设备上也能够正常显示，通常会使用栅格布局的方式来实现。col-*-*visible-*-*hidden_*_* 中间可为xs,xsm,md,lg等表示大小的单词的缩写右边为1-12之内、用于元素所占列数columns的数值xs extra small超小sm smallmd meddlelg largexl extra large超大col-*对应所有设备 col-sm-平板--屏幕宽度等于或者大于576pxcol-md-桌面显示屏--屏幕宽度大于或者等于768pxcol-lg-大桌
Bootstrap笔记
m0_62938286的博客
07-17 288
metaname="viewport"content="width=device-width,initial-scale=1">3、定义元素指定该元素在不同的设备上，所占的格子数目样式col-设备代号-格子数目。1、xs超小屏幕手机（
bootstrap
2201_75364879的博客
03-19 558
​ bootstrap来自Twitter，是目前最受欢迎的前端框架。bootstrap是基于html,css,javascript的，它简单==简洁灵活，使Web开发更加快捷。
Bootstrap入门到实战
QDCXYXZ_的博客
03-18 1196
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
BootStrap入门案例.zip
10-11
这个“BootStrap入门案例.zip”压缩包包含了多个文件，它们提供了关于使用Bootstrap学习的基础教程和实例。 首先，让我们逐一了解这些文件： 1. **01_BootStrap_HelloWorld.html** - 这个文件很可能是Bootstrap的...
BootStrap入门教程
07-22
资源名称：BootStrap入门教程资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
BOOTSTRAP入门经典
05-17
热门Web开发 Javascript框架 HTML CSS网站建设 网页设计制作 零基础读者杰出Bootstrap教程 全面涵盖常见组件的使用方法 书中代码真实有效可运行
Bootstrap入门教程一Hello Bootstrap初识
01-19
一、Bootstrap简介 Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并...
Bootstrap教程——快速上手（最给力的前端框架）
只想AC的博客
06-03 5126
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码
Bootstrap 之 sm ，lg ， md
qq_38966984的博客
05-16 1万+
       Bootstrap中默认最多将屏幕宽度分为12列，       在div平分屏幕中        sm适应小型设备       md适应中型设备       lg适应大型设备
bootstrap入门到精通
a_xia_o的博客
07-29 547
bootstrap是一个用于快速开发web应用程序和网站的前端框架。基于HTML、CSS和JavaScript封装响应式ElementUI 更适合用于企业内部的管理系统、后台管理等应用场景，而 Bootstrap 更适合用于构建响应式的 Web 网站、博客等前端页面。
23.0 Bootstrap 框架1
清风
09-26 1613
1.2 优点 1.3 版本 1.4 使用方式 1.4.1 CDN引用 1.4.2 本地引用 2.Bootstrap5 页面 2.1 doctype声明 2.2 移动设备优先 3. 响应式容器 屏幕尺寸 超级小屏幕
Bootstrap学习笔记--网格基础
qq_38409944的博客
05-24 375
bootstrap3是移动优先的 所以是从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格 Bootstrap的网格系统允许在页面上多达12列。 如果您不想单独使用全部12列，则可以将列组合在一起以创建更宽的列 bootstrap的网格系统具有响应性，并且列根据屏幕大小自动重新排列 网格： 基本结构： &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div clas
探秘MDBootstrap：赋予Bootstrap优雅的Material Design
最新发布
gitblog_00020的博客
03-20 368
探秘MDBootstrap：赋予Bootstrap优雅的Material Design 项目地址:https://gitcode.com/mdbootstrap/material-design-for-bootstrap MDBootstrap 是一个基于流行前端框架Bootstrap的扩展库，它引入了Google的Material Design设计语言，为开发者和设计师提供了一套美观、一致且响应...
Container容器
m0_57756558的博客
06-08 2000
Container容器 Bootstrap原生带三种container宽度规范： .container，居中，适配不同的断的max-width尺寸 .container-fluid，全屏，适配屏幕的width:100%尺寸 .container-{断点规格}（见下表，如container-sm），在指定规格断上width：100%尺寸 4、下面的表格描述了container在不同屏幕的max-width规范，以及.container、.container-fluid的断点区别 ...
学习 Bootstrap 5 之 Containers
qq_37354060的博客
01-15 984
学习 Bootstrap 5 之 容器容器 (Containers)1. 什么是容器?2. 三种容器(1). .container(2). .container-fluid(3). .container-{断点}(4). 容器宽度表格 容器 (Containers) Bootstrap 5 官方文档 1. 什么是容器?   容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。   可以简单理解为人家写好的样式, 只需要我们在class种加入这些容器对应的名字, 就可以使用这
Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】
champion564的博客
05-13 1573
bootstrap框架bootstrap全面教材下载bootstrap：在项目中使用bootstrap：Bootstrap3.0（基于jQuery）1、表单2、按钮、10、网格系统10.110.2偏移列10.3嵌套列10.4列排序3、输入框组、4、导航栏、5、下拉菜单、6、滚动监听、7、提示工具、8、折叠、9、轮播10、UI编辑器 bootstrap全面教材 Bootstrap3.0（基于jQuery） 1、表单 2、按钮、 10、网格系统 10.1 10.2偏移列 10.3嵌套列 10.
BootStrap教程
08-29
BootStrap教程 移动开发 快速入门的教程 实用

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值