Bootstrap基本样式

最新推荐文章于 2024-05-17 17:36:00 发布
最新推荐文章于 2024-05-17 17:36:00 发布
阅读量4.4k 收藏 8
点赞数
分类专栏： Web前端框架 Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41385798/article/details/84324644
版权

使用Bootstrap之前下载它所需的文件，登录官网www.getbootstrap.com 下载该框架的文件和源码。点击Download跳转到下载页面
在这里插入图片描述
点击download进行下载
在这里插入图片描述
做好准备工作后就可以创建项目了，项目结构：
在这里插入图片描述
Bootstrap 基本模板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Bootstrap 基本模板</title>

    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可以删除-->
    <!-- 注意：Respond.js不支持file://方式访问-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<!-- 如果要使用Bootstrap的JS插件，必须引入jQuery -->
<script src="../js/jquery-1.12.4.js"></script>
<!-- Bootstrap的JS插件-->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap列偏移

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bootstrap列偏移</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            margin-top: 20px;
            color: #fff;
        }

        .container {
            outline: 1px solid red;
        }

        .row div {
            outline: 1px solid;
            background: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-1">第一个</div>
        <div class="col-md-1 col-lg-offset-4">第二个</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
Bootstrap列嵌套

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bootstrap列嵌套</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            margin-top: 20px;
            /*color: #fff;*/
        }

        .container {
            outline: 1px solid red;
        }

        .row div.row {
            background: red;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">

        <div class="col-md-8">
            Level 1:col-md-8
            <div class="row">
                <div class="col-md-6">Level 2:col-md-6</div>
                <div class="col-md-6">Level 2:col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">Level 1:col-md-4</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
Bootstrap列排序

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bootstrap列排序</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            margin-top: 20px;
            color: #fff;
        }

        .container {
            outline: 1px solid red;
        }

        .row div {
            outline: 1px solid;
            background: black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-9">第一个</div>
        <div class="col-md-3">第二个</div>
    </div>
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            第一个
        </div>
        <div class="col-md-3 col-md-pull-9">
            第二个
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
Bootstrap列组合

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bootstrap列组合</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            margin-top: 20px;
        }
        .row div{
            outline: 1px solid red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
        <div class="col-md-1">col-md-</div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8</div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
Bootstrap标题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Bootstrap标题</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            margin-left: 50px;
        }
    </style>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<hr/>
<span class="h1">我是h1</span><br/>
<span class="h2">我是h2</span><br/>
<span class="h3">我是h3</span><br/>
<span class="h4">我是h4</span><br/>
<span class="h5">我是h5</span><br/>
<span class="h6">我是h6</span><br/>
<hr/>
<h1>我是h1 <small>bootstrap</small></h1>
<h2>我是h2 <small>bootstrap</small></h2>
<h3>我是h3 <small>bootstrap</small></h3>
<h4>我是h4 <small>bootstrap</small></h4>
<h5>我是h5 <small>bootstrap</small></h5>
<h6>我是h6 <small>bootstrap</small></h6>
</body>
</html>

在这里插入图片描述
内联列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>内联列表</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding: 50px;
        }
        ul{
            border: 1px solid red;
            font-size: 20px;
        }
    </style>
</head>
<body>
<ul class="list-inline">
    <li>首页</li>
    <li>岗位课</li>
    <li>商城</li>
    <li>关于我们</li>
</ul>
</body>
</html>

响应式栅格系统

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>响应式栅格系统的使用</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            color: #686868;
            font-family: "微软雅黑";
        }
        .cont {
            height: 300px;
            padding-top: 30px;
        }
        .mysea {
            color: #2AAAEC;
        }
        @media ( max-width: 768px) {
            p {
                font-size: 12px;
            }
            h2{
                font-size: 16px;
            }
            h3 {
                font-size: 14px;
            }
            li{
                font-size: 14px;
                margin-left: 30px;
            }
            .myimg{
                width: 50%;
            }
        }


    </style>
</head>

<body>
<!--网页主体-->
<div class="container">
    <div class="row cont">
        <div class="col-md-4 col-xs-12 text-center">
            <img class="myimg" src="img/cont1.png" alt=""/>
            <h2 class="mysea">SAE</h2>
            <p>云应用</p>
        </div>
        <div class="col-md-8 col-xs-12">
            <h3>应用开发、优化及运行的PaaS云计算平台</h3>
            <p>国内第一家公有云计算平台，支持PHP、Java、Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
            <div class="row">
                <ul class="col-md-6 col-xs-12">
                    <li>弹性扩展，负载均衡智能应对大数据处理请求</li>
                    <li>沙箱技术隔离应用</li>
                    <li>无需运维管理与架构设计</li>
                </ul>
                <ul class="col-md-6 col-xs-12">
                    <li>防火墙防止攻击</li>
                    <li>99.95%SLA，首批可信云认证</li>
                    <li>免费配额，零成本创业</li>
                </ul>
            </div>
            <a href="#">了解详情</a>
        </div>
    </div>
    <div class="row cont ">
        <div class="col-md-4 col-xs-12 col-md-push-8   text-center">
            <img class="myimg" src="img/cont2.png" alt=""/>
            <h2 class="mysea">SAE</h2>
            <p>云应用</p>
        </div>
        <div class="col-md-8 col-xs-12 col-md-pull-4 ">
            <h3>应用开发、优化及运行的PaaS云计算平台</h3>
            <p>国内第一家公有云计算平台，支持PHP、Java、Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
            <div class="row">
                <ul class="col-md-6 col-xs-12">
                    <li>弹性扩展，负载均衡智能应对大数据处理请求</li>
                    <li>沙箱技术隔离应用</li>
                    <li>无需运维管理与架构设计</li>
                </ul>
                <ul class="col-md-6 col-xs-12">
                    <li>防火墙防止攻击</li>
                    <li>99.95%SLA，首批可信云认证</li>
                    <li>免费配额，零成本创业</li>
                </ul>
            </div>
            <a href="#">了解详情</a>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述
图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            padding: 20px;
        }
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="img/3.jpg" class="img-responsive" alt=""/><br>
    <img src="img/3.jpg" class="img-rounded " alt=""/>
    <img src="img/3.jpg" class="img-circle " alt=""/>
    <img src="img/3.jpg" class="img-thumbnail " alt=""/>
</div>
</body>
</html>

在这里插入图片描述
按钮样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>按钮样式</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            padding: 20px;
        }

    </style>
</head>
<body>
<!--默认样式-->
<input type="button" class="btn btn-default btn-lg" value="default(灰色)大型"/>
<!--提供视觉加重，深蓝色-->
<input type="button" class="btn btn-primary " value="primary(深蓝色) 默认大小"/>
<!--表示成功或正使用的按钮，绿色-->
<input type="button" class="btn btn-success btn-sm" value="success(绿色)小型"/>
<!--表示提示信息,天蓝色-->
<input type="button" class="btn btn-info btn-xs" value="info(天蓝色)超小型"/>
<!--警告 橙色-->
<input type="button" class="btn btn-warning" value="warning(黄色)"/>
<!--危险,红色-->
<input type="button" class="btn btn-danger" value="danger(红色)"/>
<!--看起来像链接一样-->
<input type="button" class="btn btn-link" value="link(链接)"/>
</body>
</html>

在这里插入图片描述
横向表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>横向表单</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            padding: 20px;
        }

    </style>
</head>
<body>
<div class="container">
    <form action="#" class="form-horizontal">
        <div class="form-group">
            <span class="col-sm-2 text-center">姓名：</span>
            <div class="col-sm-10">
                <input class="form-control " type="text" placeholder="请输入你的姓名"/>
            </div>
        </div>
        <div class="form-group">
            <span class="col-sm-2 text-center"> 邮箱：</span>
            <div class="col-sm-10">
                <input class="form-control" type="email" placeholder="请输入你的邮箱"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-4" >
                <input class=" form-control " type="submit" 提交/>
            </div>
        </div>
    </form>
</div>
</body>
</html>

水平定义列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水平定义列表</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding: 20px;
        }

    </style>
</head>
<body>
<dl class="dl-horizontal">
    <dt>购物指南</dt>
    <dd>购物流程、会员价格</dd>

    <dt>配送方式</dt>
    <dd>上门自提、海外配送</dd>

    <dt>售后服务</dt>
    <dd>售后政策、价格保护、退款说明、取消订单、退换货</dd>
</dl>
</body>
</html>

表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body {
            padding: 20px;
        }

    </style>
</head>
<body>
<div class="container">
    <form action="#" class="form-inline">
        <div class="form-group">
            姓名：
            <input class="form-control" type="text" placeholder="请输入你的姓名"/>
        </div>
        <div class="form-group">
            邮箱：
            <input class="form-control" type="email" placeholder="请输入你的邮箱"/>
        </div>
        <input class=" form-control " type="submit" 提交/>
    </form>
</div>
</body>
</html>
烟锁着秦楼
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap基本样式学习笔记之图片(6)
09-01
这篇“Bootstrap基本样式学习笔记之图片(6)”将深入探讨如何使用Bootstrap来定制和优化图片样式。 首先，Bootstrap图片基本样式通常涉及以下几种类型： 1. **原始图片**: 默认情况下，Bootstrap中的图片会保持其...
Bootstrap基本样式学习笔记之表格(2)
09-01
Bootstrap 的基本表格样式是 `.table` 类，它可以将表格的默认样式替换为Bootstrap的样式，使其更加美观和一致。下面是一个基础的Bootstrap表格的例子： ```html 序号 姓名 年龄 <!-- ... --> ``` ### 2...
Bootstrap常用布局样式
橘猫吃不胖的博客
01-16 1万+
Bootstrap常用布局样式1 内容布局1.1 标题类1.2 文本类1.3 列表类2 代码和图文布局2.1 代码样式2.2 图文样式3 表格布局4 辅助样式4.1 添加或移除边框4.2 设置边框颜色 1 内容布局 1.1 标题类 在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。下面对标题类相关样式进行讲解。 在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的H
BootStrap常用样式
qq_37590794的博客
11-02 546
BootStrap入门教程,简单介绍了BootStrap的一些常用样式
BootStrap入门到实战：BootStrap全局CSS样式（二）- 文本排版和样式设置、 HTML5特殊文本标签的应用
最新发布
林林一928的博客
05-17 966
在使用Bootstrap框架时，可以通过结合使用这些HTML标签和Bootstrap的样式类，来增强页面的视觉效果和用户体验。例如，可以使用Bootstrap的排版和颜色类与这些标签结合，以创建更吸引人的代码示例、用户输入提示、代码块展示等。该内容并不直接属于Bootstrap框架的具体内容，而是HTML5中的一些标签元素，它们用于表示特定类型的文本内容，如代码、键盘输入、预格式化文本等。内容涵盖了标题、副标题、文本对齐、大小写转换、文本修饰以及缩略语等方面的样式设置。通过这几个类可以改变文本的大小写。
bootstrap 模板 css样式
zhangquanming123的博客
03-22 327
http://www.bootstrapmb.com/muban/dashuju
Bootstrap样式
Maggie~~的博客
05-13 231
1，Bootstrap框架 ----前端开发框架，基于html,css,javaScript开发的简洁前端开发框架。使web开发跟家快捷。 基本文件结构： 编译好的css和js(bootstrap.)文件，还有经过压缩的css和js(bootstrap.min. )文件，css源码映射表（bootstrap.* .map）,还有Glyphicons的图标字体。 注意： 其中css和js文件姐名称可随意改动，fonts文件夹名称不能更改，因为里面源码使用了相对路径。 2，12栅格系统 栅格系统使通过一系列的
bootstrap排版样式
杨哥的博客
06-08 3760
一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。 //创建包含段落突出的文本 Bootstrap 框架 Bootstrap 框架
Bootstrap基本样式学习笔记之表单(3)
09-01
在Bootstrap中，表单的基本样式主要依赖于预定义的CSS类。例如，在标题中提到的“样式1”中，我们看到了一个标准的登录界面，其HTML结构如下： ```html 用户名 用户名"> 密 码 密码"> 记住我吗...
Bootstrap基本样式学习笔记之按钮(4)
09-01
在本文中，我们将深入探讨Bootstrap中的一个关键组件——按钮（Buttons），特别是关于其基本样式和尺寸调节。 首先，让我们来看看按钮的基本样式。在Bootstrap中，任何HTML元素只要添加了`class="btn"`，就会自动...
Bootstrap基本样式学习笔记之标签(5)
09-01
首先，让我们回顾一下在Bootstrap中如何创建一个基本的标签。Bootstrap标签是通过`<span>`或`<button>`元素结合`.label`类来实现的。在提供的代码示例中，可以看到三种不同类型的标签： 1. `.label.label-danger`: ...
简书的css排版,前端框架Bootstrap--排版样式
weixin_42105570的博客
08-03 420
Paste_Image.pngBootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。以下是bootstrap--排版样式的知识，希望对你们有所帮助：1.Bootstrap将全局foot-size设置为14px，line-height行高设置为1.428(即20px);段落元素被设置等于1/2行高(即10px)；颜色被设置为#333；2.从Firebug查...
bootstrap4 调整元素之间距离
weixin_34357436的博客
10-23 433
https://blog.csdn.net/jianye5461/article/details/79463014 影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
热门推荐
JAVA
07-12 9万+
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
Bootstrap 基本样式-按钮
litengbin的博客
01-19 2万+
按钮样式 可以用于  按钮元素  超链元素  按钮类型的input元素   提交类型的input元素   重置类型的input元素 原始样式按钮 把button标签变成了平面的，一般不使用 原始样式按钮默认按钮 无色按钮 默认按钮提交按钮 用于提交数据 提交按钮成功按钮 一般用于
014_html折行
aihiao的专栏
10-08 757
1. 如果您希望在不产生一个新段落的情况下进行换行(新行), 请使用<br />标签。 2. <br />元素是一个空的html元素。 3. <br>还是<br /> 3.1. 您也许发现<br> 与 <br />很相似。 3.2. 在xhtml、xml以及未来的html版本中, 不允许使用没有结束标签(闭合标签)的html元素。 3.3. 即使<br>在所有浏览器中的显示都没有问题, 使用<br />
css选择器优先级及权重计算
Coder_Chang的博客
05-27 1万+
一、优先级分类 通常可以将css的优先级由高到低分为6组： 第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classn
Bootstrap 基本样式-表格
litengbin的博客
01-19 2825
1 : 基本表格    table 2 : 带斑马线的表格    table table-striped 3 : 带边框的表格    table table-bordered 4 : 有鼠标悬停状态的表格    table table-hover 5 : 更加紧凑的表格    table table-condensed 6 : 多种表格效果整合在一起    table table-str
bootstrap基础引用文件
weixin_33825683的博客
05-09 291
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title></title> <!--最新版本的Bootst...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烟锁着秦楼

海底月是天上月，眼前人是心上人

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值