Bootstrap的使用手册及学习笔记
2017-03-29 11:34
375 查看
Bootstrap的使用手册及学习笔记
Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载,大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分:<!DOCTYPE html> 2 <html lang="en"> 3 ... 4 </html> |
在使用Bootstrap之前必须要将bootstrap.css或者bootstrap.min.css(压缩版)引入到页面中,它定义了Bootstrap的基本样式。如果需要使用Bootstrap提供的组件,要将bootstrap.js或者bootstrap.min.js(压缩版)引入到页面中。因为bootstrap的JS插件需要Jquery的支持,所有在引入bootstrap.js之前必须将Jquery.js也引入到页面上。另外如果你希望你的页面支持响应式布局,必须引入bootstrap-responsive.css或者bootstrap-responsive.min.css(压缩版),它主要提供页面在移动设备上的显示样式支持,需要注意的是bootstrap-responsive.css必须放置在bootstrap.css之后,否则便不具有响应式布局功能。当然在Bootstrap3的版本中,bootstrap.css和bootstrap-responsive.css已经合并了。
一、代码样式
Bootstrap提供了代码样式,用于在页面上展示代码,以此来区分于正文的区别,如果是行内嵌套代码,可以用<code>标签,但是对于代码中的符号要进行转换(<是<、>是>)例如:
<!--正文中内嵌代码块--> <p>For example, <code><section></code> should be wrapped as inline.</p> |
1<!--.pre-scrollable,其作用是设置max-height为350px,并在垂直方向展示滚动条--> 2 <pre class="pre-scrollable"> 3 4 <p>Sample text here...</p> 5 <p class="text-muted">...</p> 6 <p class="text-primary">...</p> 7 <p class="text-success">...</p> 8 <p class="text-info">...</p> 9 <p class="text-warning">...</p> 10 <p class="text-danger">...</p> 11 12 </pre> |
基本的表格样式可以用 <table> 标签。例如:
1<h4>正常表格</h4> 2 <!-- 3 利用.table-bordered为表格和其中的每个单元格增加边框 4 利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式 5 利用.table-hover可以让<tbody>中的每一行响应鼠标悬 4000 停状态 6 --> 7 <table class="table table-striped table-bordered table-hover"> 8 <tr> 9 <th>First Name</th> 10 <th>Last Name</th> 11 <th>Username</th> 12 </tr> 13 <tr> 14 <td>Mark</td> 15 <td>Otto</td> 16 <td>@mdo</td> 17 </tr> 18 <tr> 19 <td>Jacob</td> 20 <td>Thornton</td> 21 <td>@fat</td> 22 </tr> 23 </table> |
.success | 表示成功或积极的行为 |
.error | 表示一个危险或存有潜在危险的行为 |
.warning | 表示警告,可能需要注意 |
.info | 作为一个默认样式的一个替代样式 |
1<!--利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半--> 2 <table class="table table-condensed"> 3 <tr> 4 <th>First Name</th> 5 <th>Last Name</th> 6 <th>Username</th> 7 </tr> 8 <tr class="warning"> 9 <td>Mark</td> 10 <td>Otto</td> 11 <td>@mdo</td> 12 </tr> 13 <tr class="error"> 14 <td>Jacob</td> 15 <td>Thornton</td> 16 <td>@fat</td> 17 </tr> 18 <tr class="info"> 19 <td>Larry</td> 20 <td>the Bird</td> 21 <td>@twitter</td> 22 </tr> 23 </table> |
基本的表单可以用<form>标签,只要定义了<form>标签,标签里面的每个单独的表单控件都已经被赋予了样式。默认是堆叠、label左侧对齐并在控件之上。例如:
1<form> 2 <fieldset> 3 <legend>普通表单</legend> 4 <label>Label name</label> 5 <input type="text" placeholder="Type something…"> 6 <span class="help-block">Example block-level help text here.</span> 7 <label class="checkbox"> 8 <input type="checkbox"> Check me out 9 </label> 10 <button type="submit" class="btn">Submit</button> 11 </fieldset> 12</form> |
1<legend>搜索表单</legend> 2<!--为表单增加.form-search类,并为<input>增加.search-query类,可将输入框变成圆角状--> 3 <form class="form-search"> 4 <input type="text" class="input-medium search-query" placeholder="Type something…"> 5 <button type="submit" class="btn">Search</button> 6 </form> 1<legend>行内表单</legend> 2<!--为表单增加.form-inline类, 结果是一个压缩型排列的表单,其中label左侧对齐、控件为inline-block类型。--> 3 <form class="form-inline"> 4 <input type="text" class="input-small" placeholder="Email"> 5 <input type="password" class="input-small" placeholder="Password"> 6 <label class="checkbox"> 7 <input type="checkbox"> Remember me 8 </label> 9 <button type="submit" class="btn">Sign in</button> 10 </form> 1 <legend>水平表单</legend> 2 <!-- 3为表单添加.form-horizontal类 4将label和控件包裹在.control-group中 5为label添加.control-label类 6将任何相关的控件包裹在.controls中,以确保最佳的对齐 7 --> 8 <form class="form-horizontal"> 9 <div class="control-group"> 10 <label class="control-label" for="inputEmail">Email</label> 11 <div class="controls"> 12 <input type="text" id="inputEmail" placeholder="Email"> 13 </div> 14 </div> 15 <div class="control-group"> 16 <label class="control-label" for="inputPassword">Password</label> 17 <div class="controls"> 18 <input type="password" id="inputPassword" placeholder="Password"> 19 </div> 20 </div> 21 <div class="control-group"> 22 <div class="controls"> 23 <label class="checkbox"> 24 <input type="checkbox"> Remember me 25 </label> 26 <button type="submit" class="btn">Sign in</button> 27 </div> 28 </div> 29 </form> |
任何赋予.btn类的页面元素都会显示按钮样式。不过,通常是用于更好的表现<a>和 <button>页面元素。
按钮 | class="" | 描述 |
默认 | btn | 带渐变的标准灰色按钮 |
| btn btn-primary | 提供额外的视觉感, 可在一系列的按钮中指出主要操作 |
| btn btn-info | 默认样式的替代样式 |
| btn btn-success | 表示成功或积极的动作 |
| btn btn-warning | 提醒应该谨慎采取这个动作 |
| btn btn-danger | 表示这个动作危险或存在危险 |
| btn btn-inverse | 备用的暗灰色按钮,不依赖于语义和用途 |
链接 | btn btn-link | 简化一个按钮, 使它看起来像一个链接,同时保持按钮的行为 |
<!--.btn-primary可以将按钮的颜色变蓝,.btn-large可以设置按钮的大小,对应的还有.btn-small.btn-mini 要想给按钮加上小图标可以使用<i>标签 --> <div style="margin-bottom:15px"> <a class="btn btn-primary btn-large" href=""><i class="icon-comment icon-white"></i> 查看评论</a> </div> <div style="margin-bottom:15px"> <button class="btn" type="submit"><i class="icon-shopping-cart"></i>结账</a> </div> <div style="margin-bottom:15px"> <input class="btn" type="button" value="设置"> </div> <!--通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素--> <button type="button" class="btn btn-primary btn-lg btn-block " disabled="disabled">Block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> |
下拉菜单的触发器和整个下拉菜单都需要包裹在 .dropdown 中,或者声明为position: relative;的其它页面元素中。向 .dropdown-menu添加 .pull-right 即可右对齐下拉菜单。向<li>添加 .disabled 即可禁用菜单中的某个链接,在现有的下拉菜单中,给任意的li添加 .dropdown-submenu即可自动赋予一个二级菜单,这个二级菜单会在鼠标悬停时自动展现。例如:
<div class="dropdown"> <!--data-toggle="dropdown" 表示触发下拉事件--> <button class="btn dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <!--添加下拉列表--> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> <!--添加二级子菜单--> <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> </ul> </li> </ul> </div> |
将带有 .btn 类的一系列按钮包裹在 .btn-group 中,即可创建一个按钮组。例如:
<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> |
七、分裂式按钮下拉菜单
在按钮组的基础上,我们可以很容易的创建分裂式按钮。分裂式按钮左侧是一个标准形式的按钮,右侧是一个可触发下拉菜单的链接。例如:
<div class="btn-group"> <!--为了保证URL符合规范,请使用data-target属性来代替href="#"。--> <a class="btn dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html"> 动作 <!--在按钮的后面创建一个箭头--> <span class="caret"> 128c9 ;</span> </a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> </ul> </div> |
<!--dropup表示创建一个向上弹出的菜单样式--> <div class="btn-group dropup"> <button class="btn">动作</button> <!--data-toggle="dropdown"主要是给按钮绑定下拉菜单的点击弹出事件--> <button class="btn dropdown-toggle" data-toggle="dropdown"> <!--在按钮的后面创建一个箭头--> <span class="caret"></span> </button> <!--创建下拉子菜单用.dropdown-menu定义--> |
<ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> </ul> </div> |
<script> //对所有的class="dropdown-toggle"按钮或是链接定义下拉事件 $('.dropdown-toggle').dropdown() //对ID=Mybtn的按钮或是链接定义下拉事件 $('#Mybtn').dropdown() </script> |
八、选项卡
基于<ul>并添加.nav-tabs 或者是 .nav-pills 类即可创建一个选项卡,为任一导航组件(标签页、pills或列表)添加 .disabled 类,均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的,除非你将链接的href属性去除,你还可以写JavaScript代码阻止用户点击链接。例如:
<!--设置选项卡的展示样式:.nav-tabs .nav-pills 如果想创建堆叠式的排列,可以在nav-tabs(nav-pills)的后面添加nav-stacked --> <ul class="nav nav-tabs"> <!--class="active"表示默认激活第一个选项卡--> <li class="active"><a href="#tab1" data-toggle="tab">选项一</a></li> <li><a href="#tab2" data-toggle="tab">选项二</a></li> <li><a href="#tab3" data-toggle="tab">选项三</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"><p>选项一的内容</p></div> <div class="tab-pane" id="tab2"><p>选项二的内容</p></div> <div class="tab-pane" id="tab3"><p>选项三的内容</p></div> </div> |
在页面上添加导航条组件可以用 .navbar 类来定义,然后用 .navbar-inner 类将导航中的条目装载在一起,导航条中条目可以是无序列表,将导航条放入 .container 中就可以限制其宽度。如果想在导航条目中添加分隔符,只需增加一个空白的条目并为其设置一个类即可,如果想要在导航中添加一个表单,需要包含在 .navbar-form 类中,如果是搜索表单可以定义为 .navbar-search。例如:
<div class="navbar"> <div class="navbar-inner"> <!--定义导航的Title--> <a class="brand" href="#">Title</a> <ul class="nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <!--添加分隔符--> <li class="divider-vertical"></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> <!--在导航中添加一个普通表单 <form class="navbar-form pull-right"> <input type="text" class="span2"> <button type="submit" class="btn">Submit</button> </form> --> <!--在导航中添加一个搜索表单--> <form class="navbar-search pull-right"> <!--为输入框添加.search-query即可获得一个搜索表单--> <input type="text" class="search-query" placeholder="Search"> </form> </ul> </div> </div> |
<!--添加一个下拉菜单--> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> </ul> </li> </ul> |
面包屑组件可以用 .breadcrumb 类来定义,在页面上可以用于位置(路径)提示。例如:
<ul class="breadcrumb"> <li><a href="#">首页</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul> |
分页用 .pagination 类来定义,定义如下:
<!--.pagination-centered(中间).pagination-rigth(右边)--> <div class="pagination pagination-centered"> <ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next</a></li> </ul> </div> |
<div class="pagination"> <ul> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> ... </ul> </div> |
<div class="pagination"> <ul> <li class="disabled"><span>«</span></li> <li class="active"><span>1</span></li> ... </ul> </div> |
<ul class="pager"> <li ><a href="#">前一页</a></li> <li ><a href="#">后一页</a></li> </ul> <!--将链接放页面两侧--> <ul class="pager"> <li class="previous"><a href="#">前一页</a></li> <li class="next"><a href="#">后一页</a></li> </ul> |
十二、提示框
提示框用 .alert 定义。例如:
<div class="alert alert-info" id="Myalert"> <!--用<a>标签来设置关闭功能--> <a href="#" class="close" data-dismiss="alert">X</a> <h4>提示</h4> 这是一段提示信息。 </div> <!-- 带按钮的的信息提示 --> <div class="alert alert-error fade in"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. <p> <a class="btn btn-danger" href="#">接受</a> <a class="btn" href="#">拒绝</a> </p> </div> |
关闭对话框有两种方式,一种是通过链接的方式(Safari和Opera移动版浏览器上,当使用<a>标签关闭警告框时,除了添加data-dismiss="alert"属性外,还需要包含href="#"属性),一种是通过按钮的方式。按钮方式如下:
<div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> |
<script> //给ID="Myalert"添加关闭时的事件绑定 $('#Myalert').bind('close', function () { alert('提示信息即将被关闭'); }) $('#Myalert').bind('closed', function () { alert('提示信息已经被关闭'); }) //关闭提示最好放在一个方法里面,不然页面一启动,信息提示就关闭了 $('#Myalert').alert('close'); </script> |
模态对话框是一类简洁、灵活的的弹框,Bootstrap通过 .modal 类来定义整个对话框。对话框包含三个部分:标题、正文、页脚按钮,这是对话框的通用样式,其分别对应的样式类为:.modal-header、.modal-body、.modal-footer 。
.modal-header主要用于显示标题,也可以带有关闭按钮。.modal-body是正文部分,具体内容可自定义,一般为提示语,或是个表单。.modal-footer主要显示操作按钮,如"关闭"、"保存"等等,实例如下:
<!--触发弹出对话框--> <a href="#myModal" role="button" class="btn" data-toggle="modal">链接触发</a> <button type="button" class="btn" data-toggle="modal" data-target="#myModal">按钮触发</button> <!--定义一个.modal的div包围整个对话框内容 hide表示隐藏 fade是动画效果 data-backdrop="false" 表示没有背景遮挡,如是true表示显示黑色的页面背景且点击黑色背景会隐蔽modal data-backdrop="static"表示有背景遮挡,并且点击对黑色背景区域,对话框不会消失--> <div id="myModal" class="modal hide fade" data-backdrop="static"> <!--用.modal-header定义一个对话框的头--> <div class="modal-header"> <!--添加一个关闭按钮--> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>对话框标题</h3> </div> <!--用.modal-body定义对话框的主体内容--> <div class="modal-body"> <p>One fine body…</p> </div> <!--用.modal-footer定义对话框的主体内容--> <div class="modal-footer"> <a href="#" class="btn" onclick="hideModal()">关闭</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> </div> |
当然你也可以使用JS的方式来进行触发或者是关闭操作。
$('#myModal').modal() |
名称 | 类型 | 默认 | 描述 |
backdrop | 布尔值 | true | 为true时,显示对话框的遮蔽背景,鼠标点击背景即可关闭对话框。为false时,无背景。 |
keyboard | 布尔值 | true | 为true时按下ESC键关闭模态对话框。为false时无效。 |
show | 布尔值 | true | 是否在初始化时显示对话框。 |
如果想通过javascript进行设置,如下:
$('#myModal').modal({ keyboard: false }) |
$('#myModal').modal('toggle'):手动打开或隐藏一个模态对话框。 $('#myModal').modal('show'):手动打开一个模态对话框。 $('#myModal').modal('hide'):手动隐藏一个模态对话框。 |
事件 | 描述 |
show | 当show方法被调用时,此事件将被立即触发。 |
shown | 当模态对话框呈现到用户面前时(会等待过渡效果执行结束)此事件被触发。 |
hide | 当hide方法被调用时,此事件被立即触发。 |
hidden | 当模态对话框被隐藏(而且过渡效果执行完毕)之后,此事件将被触发。 |
$('#myModal').on('事件名', function () { // do something… }) |
工具提示有两种形式,分别是 tooltip 和 popover 。实例如下:
<p><a title="这是一个提示信息" rel="tooltip" href="#">Tooltip</a></p> <p><a class="btn" title="这是标题" data-content="这是提示的主要内容" rel="popover" href="#">Popover</a></p> |
<script> $('body').off('.data-api') $("a[rel=tooltip]").tooltip() $("a[rel=popover]").popover() </script> |
进度条使用 .progress 类定义,默认样式是带有垂直渐变的进度条。例如:
<div class="progress"> <div class="bar" style="width: 60%;"></div> </div> |
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div> |
<div class="progress"> <div class="bar bar-success" style="width: 35%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div> </div> |
十六、轮播
bootstrap为轮播组件定义了一套轮播的css样式,其中有三个最基本的样式 .carousel 、.carousel-inner 、.item 。
.carousel 是整个轮播的样式。 .carousel-inner 是幻灯片组的样式,所有的幻灯片都定义在其内。.item 是每张幻灯片的样式(其内是轮播的元素,比如单张图片),这三个样式定义了整个轮播组件的架构。另外还有俩个 .carousel-indicators .carousel-control是可选的,这俩个是用于控制幻灯片。.carousel-indicators 是指示器,控制直接切换到哪张,.carousel-control是控制器,用于切换上一张、下一张。
在控制器和指示器中使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev (切换到上一张)或 next(切换到下一张),他们可以改变当前帧,一般用作控制器。另外,使用data-slide-to可以传递某个帧的下标,例如data-slide-to="2",这样就可以直接跳转到这个指定的帧 (一般用作指示器,下标从0开始计算)。例如:
<!-- slide是设置轮播的动画效果(平缓过渡)默认是5秒切换一次--> <div id="myCarousel" class="carousel slide"> <!--用作指示器--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <!--每一个整体都用一个.item定义一下active表示默认显示--> <div class="item active"> <img src="http://placehold.it/940x360/C24704/FFFFFF&text=Bootstrp" alt=""> <!--定义文字的样式(半透明黑色的背景)--> <div class="carousel-caption"> <h4>标题一</h4> <p>Bootstrap提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景。</p> </div> </div> <div class="item"> <img src="http://placehold.it/940x360/C24704/FFFFFF&text=Bootstrp" alt=""> <div class="carousel-caption"> <h4>标题二</h4> <p>Bootstrap提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景.</p> </div> </div> <div class="item"> <img src="http://placehold.it/940x360/C24704/FFFFFF&text=Bootstrp" alt=""> <div class="carousel-caption"> <h4>标题三</h4> <p>Bootstrap提供了几种可以帮你快速上手的方式,每种方式针对具有不同技能等级的开发者和不同的使用场景。</p> </div> </div> </div> <!--用作控制器--> <a href="#myCarousel" data-slide="prev" class="carousel-control left"> ‹ </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> › </a> </div> |
//将带有"carousel"类样式的元素作为轮播组件启动 $('.carousel').carousel() //id="myCarousel"的元素作为轮播组件启动 $('#myCarousel').carousel() |
bootstrap提供了俩个参数用于对轮播过程进行控制。
名称 | 类型 | 默认值 | 描述 |
interval | number | 5000 | 在自动轮播过程中,展示每帧所停留的时间。如果是false,轮播不会自动启动。 |
pause | string | "hover" | 当鼠标在轮播区域内时暂停循环,在区域外时则继续循环。 |
$('.carousel').carousel({ interval: 2000 }) |
.carousel('cycle'):从左向右循环播放。 .carousel('pause'):停止循环播放。 .carousel(number):循环到指定帧(下标从0开始,类似数组)。 .carousel('prev'):返回到上一帧。 .carousel('next'):下一帧。 |
事件名 | 描述 |
slide | 当slide实例方法被调用时,此事件会被立即触发。 |
slid | 当切换完一帧后触发。 |
$('#myCarousel').on('事件名', function () { .... }) |
相关文章推荐
- UNIX环境学习笔记------原始套接字-------如何使用man 手册查看原始套接字的相关资料?
- Android学习手册——Loaders使用笔记
- jQuery 使用手册---------学习笔记
- [学习笔记]man手册的使用
- [知了堂学习笔记]_记一次BootStrap的使用
- Git 学习笔记--3.EGit使用手册
- 学习笔记 SVN简易使用手册详解
- bootstrap模态弹出框学习笔记(1-9 模态弹出框--模态弹出窗的使用(data-参数说明))
- Spring Boot 学习笔记【6】使用FreeMarker与BootStrap开发Web
- ng2学习笔记之bootstrap中的component使用教程
- Flask学习笔记-使用bootstrap-datepicker实现页面日期选择
- Flask学习笔记-在Bootstrap框架下Web表单WTF的使用
- CEGUI学习笔记二-- FalagardSkinning使用手册第2章翻译
- bootstrap学习笔记--bootstrap排版类的使用
- CEGUI学习笔记二--FalagardSkinning使用手册第2章 (转kun(小龙))
- [知了堂学习笔记]_记一次BootStrap的使用
- 学习笔记之引用的使用
- 原创-IBM DB2学习笔记-1:日期以及时间的使用
- C# 学习笔记 -- 第三天 申明和使用数据
- C#中使用委托的学习笔记