BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

合集下载

Bootstrap4卡片布局与轮播图应用

Bootstrap4卡片布局与轮播图应用Bootstrap4 卡片布局与轮播图应用Bootstrap 是一套用于开发响应式和移动设备优先的前端开发框架，其中的卡片布局和轮播图应用是非常常见和重要的功能。

本文将介绍Bootstrap4 中卡片布局和轮播图应用的使用方法和注意事项。

一、卡片布局卡片布局是一种常见的网页内容展示方式，常用于显示产品、文章、用户信息等。

Bootstrap4 提供了简单易用且美观的卡片布局组件，可以轻松构建出各种风格的卡片。

1.1 卡片基础布局卡片基础布局是最简单的卡片样式，通过添加 Bootstrap4 提供的class 属性即可实现。

```html<div class="card"><img src="card-img.jpg" class="card-img-top" alt="Card Image"><div class="card-body"><h5 class="card-title">Card Title</h5><p class="card-text">Card Content</p><a href="#" class="btn btn-primary">Read More</a></div></div>```上述代码中，`card` 类表示卡片的容器，`card-img-top` 类表示卡片的顶部图片，`card-body` 类表示卡片的内容区域，`card-title` 类表示卡片的标题，`card-text` 类表示卡片的文本内容，`btn` 和 `btn-primary` 则表示一个按钮及其样式。

Bootstrap图片轮播效果详解

Bootstrap图⽚轮播效果详解导⾔Bootstrap 轮播（Carousel）插件是⼀种灵活的响应式的向站点添加滑块的⽅式。

除此之外，内容也是⾜够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

⽰例下⾯演⽰图⽚的轮播，使⽤bootstrap中的Carousel显⽰循环播放元素插件。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="..." alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>在src中插⼊图⽚已为图⽚设置⼤⼩还可以为其加上标题<div class="item"><img src="..." alt="..."><div class="carousel-caption"><h3>...</h3><p>...</p></div></div>参考1.2.以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

bootstrap 使用方法

bootstrap 使用方法
Bootstrap是一种流行的前端开发框架，可以帮助开发者快速构建响应式和移动优先的网站。

以下是Bootstrap的使用方法：
1. 安装Bootstrap：可以通过下载压缩包或使用包管理器（如npm或yarn）来安装Bootstrap。

安装完成后，将Bootstrap的CSS和JavaScript文件
引入到HTML文件中。

2. 创建HTML骨架结构：先正常搭建一个HTML页面，然后根据需要选择Bootstrap提供的组件，将其复制到HTML页面中。

3. 引入相关样式文件：使用link标签引入Bootstrap的CSS文件。

也可以通过Sass工具对Bootstrap进行深度定制。

4. 书写内容：正常输入内容，如果发现内容没有了浏览器默认的内外边距，则证明CSS文件引入成功。

5. 利用Bootstrap组件：Bootstrap提供的组件不仅减少了开发工作量，
而且统一了设计风格。

例如，可以使用Navbar组件创建导航菜单，使用模态框创建对话框，使用Carousel组件添加动态轮播图等。

总之，使用Bootstrap可以快速构建出美观、响应式的网站，提高开发效率。

如需了解更多关于Bootstrap的使用方法，建议访问相关社区或论坛，或参考官方文档。

BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模。。。

BootstrapTable表格数据左右移动功能遇到的问题（数据左右移动，列表拖拽排序，模。

使⽤bootstrapTable实现数据左右移动的功能其实做过很多了，但原来实现的功能都是⽐较单⼀，都是选中单条数据进⾏移动。

这次需要实现的功能⽐较全⾯，中间遇到不少的坑，此次正好在这⾥将所有的功能代码梳理⼀下。

实现以下功能：1.选中单条数据进⾏左右移动2.将列表中所有数据全部进⾏左右移动3.左边的数据移动到右边后，为其增加⼀个序号列，并根据右侧列表的数据⾃动递增序号4.右侧列表中的数据可以随意拖动排序，序号⾃动变更5.在列表上的搜索框输⼊关键字，定位到列表中对应的数据并选中html代码：1<div class="movebox clearfix box-padding10">2<div class="movebox-left fl">3<p>可选考核项⽬</p>4<div class="form-inline form-inline-auto" style="padding-right: 0;">5<div class="form-group t-right10">6<select class="form-control" style="min-width: 110px" id="kaoheFW" name="kaoheFW">7<option value="2">专科</option>8<option value="1">公共</option>9</select>10</div>11<div class="form-control-radio" style="width: auto; min-width: 0;">12<input type="radio" class="radio" name="leixing" value="" checked>13<label class="f-left t-right10 t-lineheight28">全部</label>14<input type="radio" class="radio" name="leixing" value="2">15<label class="f-left t-right10 t-lineheight28">操作</label>16<input type="radio" class="radio" name="leixing" value="1">17<label class="f-left t-right10 t-lineheight28">理论</label>18</div>19<div class="form-group">20<input class="form-control" placeholder="请输⼊考核项⽬" type="text" value="" id="kaoheXM">21</div>22</div>23<div class="clear"></div>24<div class="form-table-height main-y-scroll" id="kaoheXMList">25<table class="table table-striped table-bordered table-hover text-center" id="tableleft">26<thead>2728</thead>29<tbody></tbody>30</table>31</div>32<div class="space"></div>33</div>34<div class="movebox-btn fl">35<span id="add_all" class="icon iconfont icon-youshuangjiantou"></span>36<span id="add" class="icon iconfont icon-jiantou-you" onclick="add_keShiKHXM()"></span>37<span id="remove" class="icon iconfont icon-jiantou-zuo" onclick="remove_keShiKHXM()"></span>38<span id="remove_all" class="icon iconfont icon-zuoshuangjiantou"></span>39</div>40<div class="movebox-right fl">41<p>已选择考核项⽬</p>42<div class="form-inline form-inline-auto" style="padding-right: 0;">43<div class="form-group t-right10">44<select class="form-control" style="min-width: 110px" id="keshiKHFW" name="keshiKHFW">45<option value="2">专科</option>46<option value="1">公共</option>47</select>48</div>49<div class="form-control-radio" style="width: auto; min-width: 0;">50<input type="radio" class="radio" name="keshiLX" value="" checked>51<label class="f-left t-right10 t-lineheight28">全部</label>52<input type="radio" class="radio" name="keshiLX" value="2">53<label class="f-left t-right10 t-lineheight28">操作</label>54<input type="radio" class="radio" name="keshiLX" value="1">55<label class="f-left t-right10 t-lineheight28">理论</label>56</div>57<div class="form-group">58<input class="form-control" placeholder="请输⼊考核项⽬" type="text" value="" id="keshiKHXM">59</div>60</div>61<div class="clear"></div>62<div class="form-table-height main-y-scroll" id="keshiKHXMList">63<table class="table table-striped table-bordered table-hover text-center" id="tableright">64<thead>6566</thead>67<tbody>68</tbody>69</table>70</div>71<p class="t-gray">说明：拖拽⾏进⾏排序</p>72</div>73</div>View Code初始化bootstraptable:1function Init_kaoHeXM() {23//获取关键字4var kaoHeFW = $('#kaoheFW option:selected').val();;5var kaoHeLX = $('input[name="leixing"]:checked').val();67 $('#tableleft').bootstrapTable("destroy");8//初始化table9 $('#tableleft').bootstrapTable({10 url: "/HLGL/ChengJiGL/GetkaoheXMList",11 postData: function () {12return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }13 },14 columns: [15 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },16 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },17 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } }1819 ],20 pagination: false,21 autoSelectFirstRow: false,22//height: $(window).height() - 11723 });24 }25function Init_keShiKHXM() {26//获取关键字27var kaoHeFW = $('#keshiKHFW option:selected').val();;28var kaoHeLX = $('input[name="keshiLX"]:checked').val();2930 $('#tableright').bootstrapTable("destroy");31 $('#tableright').bootstrapTable({32 url: "/HLGL/ChengJiGL/GetkeshiKHXMList",33 postData: function () {34return { "keShiID": keShiID, "kaoHeFW": kaoHeFW, "kaoHeLX": kaoHeLX }35 },36 columns: [37 { field: 'PAIXUXH', title: "排序序号", width: "5%", visible: true, class: "index", },38 { field: 'KESHIKHXMID', title: "科室考核项⽬ID", visible: false },39 { field: 'KAOHEXMID', title: "考核项⽬ID", visible: true },40 { field: 'XIANGMUMC', title: "项⽬名称", visible: true },41 { field: 'KAOHELX', title: "考核类型", visible: true, formatterType: 'JSON', formatter: { '1': '理论', '2': '操作' } }4243 ],44 pagination: false,//不分页45 autoSelectFirstRow: false//默认不选中第⼀⾏46//height: $(window).height() - 11747 })48 }View Code初始化后定义了两个变量存放bootstrapTable：$tableLeft = $('#tableleft').bootstrapTable();$tableRight = $('#tableright').bootstrapTable();下⾯就开始实现第⼀个功能：选中单条数据进⾏左右移动，右移时增加序号列并在原有基础上递增这个功能⽐较简单，没有什么需要注意的地⽅1//添加科室考核项⽬2function add_keShiKHXM() {3//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableleft").bootstrapTable('getSelections');4var selectContent = $tableLeft.bootstrapTable('getSelectedRow');5if (selectContent == "" || selectContent==null || selectContent == undefined) {6 HRP.AlertError("请先选择需要操作的数据！");7return false;8 }9 selectContent.KESHIID = keShiID;1011//获取到右侧列表的排序序号，给左侧选中⾏进⾏设置12var len = $('#tableright tr .index').length;13if (len == 1)14 { selectContent.PAIXUXH = 1; }15else {16 selectContent.PAIXUXH = parseInt($('#tableright tr').eq(len - 1).children(0).eq(0)[0].innerText) + 1;//len-1 是因为有标题列17 }181920 $tableRight.bootstrapTable("append", selectContent);21var selects = $tableLeft.bootstrapTable('getSelectedRow');2223var KAOHEXMID = selects.KAOHEXMID;2425 $tableLeft.bootstrapTable('remove', {26 field: 'KAOHEXMID',27 values: [String(KAOHEXMID)]28 });2930 }3132//移除科室考核项⽬33function remove_keShiKHXM() {34//注意getSelectedRow这个是内部重新封装的⽅法，原⽣获取选中⾏应该是$("#tableright").bootstrapTable('getSelections');35var selectContent = $tableRight.bootstrapTable('getSelectedRow');36if (selectContent == "" || selectContent==null || selectContent == undefined) {37 HRP.AlertError("请先选择需要操作的数据！");38return false;39 }404142 $tableLeft.bootstrapTable("append", selectContent);43var selects = $tableRight.bootstrapTable('getSelectedRow');4445var daima = selects.KAOHEXMID;46 $tableRight.bootstrapTable('remove', {47 field: 'KAOHEXMID',48 values: [String(daima)]49 });50 };第⼆个功能：将列表所有数据进⾏左右移动1 $("#add_all").click(function () {23if ($("#tableleft tbody tr.no-records-found").length > 0) {4 HRP.AlertError("当前没有可以操作的数据！");5return false;6 }7 $("#tableright tbody tr.no-records-found").remove();//这⼀句是删除掉表格中没有数据时的提⽰⾏8// $("#tableright").find(".no-records-found").remove();·9var len = 0;10if ($("#tableright tbody tr").length == 0) {11 len = 1;12 }13else {14 len = parseInt($("#tableright tbody tr:last-child .index").html()) + 1;15 }1617//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据18for (var i = 0; i < $("#tableleft tbody tr").length; i++) {19var content = {"PAIXUXH":len,"KAOHEXMID":$("#tableleft tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableleft tbody tr").eq(i).find("td")[1].innerText,"KAOHELX":$("#tableleft tbody tr").eq(i).find("td")[220 $tableRight.bootstrapTable("append", content);21 len++;22 }2324//$("#tableleft tbody tr").remove();25//这⾥不能⽤remove，此时需要⽤bootstrapTable⾃带的删除，否则下次对表进⾏操作时remove的数据会再次出现26//2728var xiangMuLength = $("#tableleft tbody tr").length;29for (var j = 0; j < xiangMuLength; j++) {30var index = $("#tableleft tbody tr").eq(0).attr("data-index");31 $tableLeft.bootstrapTable('deleteRow',index.toNumber());32 }33 });3435 $("#remove_all").click(function () {36if ($("#tableright tbody tr.no-records-found").length > 0) {37 HRP.AlertError("当前没有可以操作的数据！");38return false;39 }40 $("#tableleft tbody tr.no-records-found").remove();41 $("#tableright tbody td.index").remove();424344//下⾯两个for循环不能合在⼀起，因为delete以后eq(i)获取的数据会随着改变，不是原来索引的数据45for (var i = 0; i < $("#tableright tbody tr").length; i++) {4647var content = {};48 content = {"KAOHEXMID":$("#tableright tbody tr").eq(i).find("td")[0].innerText,"XIANGMUMC":$("#tableright tbody tr").eq(i).find("td")[1].innerText,"KAOHELX":$("#tableright tbody tr").eq(i).find("td")[2].innerText}49 $tableLeft.bootstrapTable("append", content);50 }5152var keShiXMLength = $("#tableright tbody tr").length;53for (var j = 0; j < keShiXMLength; j++) {5455var index = $("#tableright tbody tr").eq(0).attr("data-index");56 $tableRight.bootstrapTable('deleteRow',index.toNumber());57 }585960 }); 这⾥全部数据的左右移动我⽤的是遍历再使⽤bootstrapTable的append⽅法来进⾏插⼊，原本我是直接使⽤的html的appendto⽅法来进⾏实现，结果发现存在严重的bug。

插件的鼠标手势和动作辅助功能如何配置

插件的鼠标手势和动作辅助功能如何配置哎呀，要说这插件的鼠标手势和动作辅助功能的配置，那可真是一门有趣的“技术活”！我还记得有一次，我在办公室里为了赶一份重要的文件，那叫一个手忙脚乱。

电脑上各种窗口开了一堆，切换起来特别麻烦。

这时候我就想，要是能有个方便的工具来帮我快速操作，那该多好。

咱们先来说说鼠标手势。

这就像是给鼠标施了魔法一样。

比如说，你在浏览器里，想要快速关闭一个标签页，只需要轻轻一划，就像挥挥手跟它说拜拜，它就乖乖关闭了。

不同的插件，设置鼠标手势的方法也不太一样。

有些插件，你得先打开它的设置界面，找到鼠标手势的选项。

比如说，你想设置一个“向左滑动”的手势来实现后退的功能，那就在相应的设置里选择“向左滑动”，然后指定它的动作是“后退”。

还有动作辅助功能，这玩意儿也特别实用。

比如说，你可以设置按住鼠标右键再拖动来实现页面的缩放。

想象一下，你在看一张图片，觉得太小看不清，这时候这么一操作，图片瞬间变大，细节清晰可见，是不是很方便？在配置这些功能的时候，一定要注意根据自己的使用习惯来。

别盲目跟风设置一些看起来很酷但自己根本用不上的手势和动作。

就像我有个同事，设置了一堆复杂的手势，结果自己都记不住，反而更麻烦了。

另外，有些插件还支持自定义手势和动作。

这就给了你很大的发挥空间。

比如说，你觉得某个操作经常用到，但插件里没有默认的手势，那你就可以自己创建一个。

配置好了之后，也别忘了多试试，熟悉熟悉这些手势和动作。

不然，等真正要用的时候，手一滑，结果不是自己想要的操作，那可就尴尬啦。

总之，配置插件的鼠标手势和动作辅助功能，就像是给自己的电脑操作来了一场个性化的定制，让你的电脑使用体验更加顺畅、高效。

希望大家都能配置出最适合自己的鼠标手势和动作辅助功能，让工作和娱乐都变得更加轻松愉快！。

BootStrap中jQuery插件Carousel实现轮播广告效果

BootStrap中jQuery插件Carousel实现轮播⼴告效果轮播⼴告在⽹站中的应⽤实在是太常见了，下⾯说⼀说怎样使⽤bootstrap中的Carousel插件来实现轮播⼴告效果，下图为最终效果：具体实现⽅法请看下⾯的代码：<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟<ol class="carousel-indicators"><li data-target="#carousel" data-slide-to="0"></li><li data-target="#carousel" data-slide-to="1" class="active"></li><li data-target="#carousel" data-slide-to="2"></li><li data-target="#carousel" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="item"><img src="img/02.jpg" alt=""/><div class="carousel-caption"><h3>First slide label</h3><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div><div class="item active"><img src="img/03.jpg" alt=""/><div class="carousel-caption"><h3>Second slide label</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div class="item"><img src="img/04.jpg" alt=""/><div class="carousel-caption"><h3>Third slide label</h3><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p></div></div><div class="item"><img src="img/05.jpg" alt=""/><div class="carousel-caption"><h3>Fourth slide label</h3><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div></div><a class="left carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div>如代码中注释，⼴告序号指⽰器，⼴告的说明⽂字，以及上⼀张、下⼀张的按钮都是可以根据需要⾃⾏添加的。

Web前端培训教程：Bootstrap 中的轮播插件

Web前端培训教程：Bootstrap 中的轮播插件本节课我们主要学习一下Bootstrap 中的轮播插件。

一．轮播轮播插件就是将几张同等大小的大图，按照顺序依次播放。

//基本实例。

<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"><div class="item active"><img src="img/slide1.png" alt="第一张"></div><div class="item"><img src="img/slide2.png" alt="第二张"></div><div class="item"><img src="img/slide3.png" alt="第三张"></div></div><a href="#myCarousel" data-slide="prev" class="carousel-controlleft">&lsaquo;</a><a href="#myCarousel" data-slide="next" class="carousel-controlright">&rsaquo;</a></div>data 属性解释：1.data-slide 接受关键字prev 或next，用来改变幻灯片相对于当前位置的位置；2.data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑动块移动到一个特定的索引，索引从0 开始计数。

前端框架技术应用中的图片轮播与滑动效果实现方法

前端框架技术应用中的图片轮播与滑动效果实现方法在现代网页设计中，图片轮播和滑动效果成为了提升用户体验的重要手段之一。

通过动态展示多张图片，可以有效地吸引用户的注意力，增加页面的互动性和吸引力。

在前端开发中，有多种框架和技术可供选择，用于实现图片轮播和滑动效果。

本文将介绍一些常见的方法和技术，帮助您实现出色的图片轮播和滑动效果。

一、jQuery插件：SlickSlick是一款流行的jQuery插件，用于创建响应式且可自定义的轮播组件。

它提供了许多选项，供开发者根据项目需求来自定义轮播效果。

使用Slick，您可以轻松地添加自动播放、循环滚动、切换效果和其他配置选项。

为了使用Slick，您需要先引入jQuery和Slick的相关文件。

然后，在HTML中定义一个包含多个图片的容器，给每个图片一个自定义的类名。

接着，在JavaScript文件中使用Slick的初始化函数来创建轮播效果，可以通过参数来设置轮播的速度、切换效果等。

最后，通过自定义CSS来调整轮播容器的样式。

二、CSS框架：BootstrapBootstrap是一个流行的HTML、CSS和JavaScript开发框架，提供了许多组件和工具，用于构建现代化的响应式网页。

其中，Carousel组件可以用来实现图片轮播效果。

Bootstrap的Carousel组件具有丰富的选项，可以使用CSS类和JavaScript函数来实现滑动、淡入淡出等效果。

使用Bootstrap Carousel，您需要先引入Bootstrap的相关文件。

然后，在HTML中添加Carousel组件的HTML结构，包括一个包裹图片的容器和相应的控制元素。

您可以使用自定义的CSS类来调整样式，并使用JavaScript函数来初始化Carousel组件和设置参数。

三、React框架：React Slick如果您正在使用React框架进行开发，那么React Slick可能是一个不错的选择。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。

除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

因为最近开发的项目涉及到移动设备上的HTML5 开发，其中需要实现轮播效果。

然后最快捷的方式，你知道的（Bootstrap），然后原生的Bootstrap 的carousel.js 插件并没有支持手势。

然后......自己想办法呗，再然后，就有下面3种解决方案：
jQuery Mobile (/download/)
$("#carousel-generic").swipeleft(function() {
$(this).carousel('next');
});
$("#carousel-generic").swiperight(function() {
$(this).carousel('prev');
});
TouchSwipe jQuery plugin (https:///mattbryson/TouchSwipe-Jquery-Plugin)
$("#carousel-generic").swipe({
swipeLeft: function() { $(this).carousel('next'); },
swipeRight: function() { $(this).carousel('prev'); },
});
hammer.js (http://eightmedia.github.io/hammer.js/) + 
jquery.hammer.js (https:///EightMedia/jquery.hammer.js)
$('#carousel-generic').hammer().on('swipeleft', function(){
$(this).carousel('next');
});
$('#carousel-generic').hammer().on('swiperight', function(){
$(this).carousel('prev');
});
单单为了支持滑动手势而导入整个jQuery Mobile 貌似有些大材小用，（现在英文原文中已经抽离，可下载）
而TouchSwipe 在两边可点击按钮区域滑动无效，然后选择了Hammer。

以上所述是小编给大家介绍的BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)，希望对大家有所帮助。