JS组件Bootstrap Table表格行拖拽效果实现代码

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了JS组件Bootstrap Table表格行拖拽效果实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、业务需求及实现效果

项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里面指定行的位置，拖动完成后，左边表格减少一行，右边表格增加一行。除此之外，还需要撤销操作(相当于Ctrl + Z操作)，能够返回到上一步的状态。可能描述会让大家模拟两可，反正已经实现了，先来看看效果图吧。

1、先看看拖动之前的效果

2、这是拖动左边表格行数据的效果

3、拖动一行完成之后表格数据的效果

4、第二次、第三次拖动完成后效果

5、右边表格上面撤销操作点击效果

6、多次点击撤销，表格回到初始状态

二、代码示例

接到需求的第一感觉是应该上Bootstrap table api里面找一下，毕竟开源的力量是强大的，或许有相关的示例呢。经过一番查找，很可惜，Bootstrap Table没有这种两张表格之间的操作。想想其实也可以理解，Bootstrap Table是针对某个动态表格数据绑定的，它的侧重点是表格内部的功能，比如表格内部行的拖拽排序(Reorder Rows)有很好的解决方案，对于像博主这样的特殊需求，似乎也应该自己去实现。 1、需求分析 既然决定自己去写，开始分析需求，似乎这个操作里面比较困难的是拖拽效果，说到拖拽效果，原来使用JsPlumb的时候那使用太多了，于是就想到了我们神奇的JQuery UI里面的draggable.js 和droppable.js。拖拽的问题解决了，那么还有一个难点，就是撤销操作怎么办？我们知道Ctrl+z的意思是还原，什么叫还原？就是返回到上一步的操作，那么前提是要能够保存上一步的状态，说到保存某一步的状态，博主就知道怎么做了，需要一个全局变量Json，里面要有三个键值对，分别是当前步骤的索引、左边表格的数据、右边表格的数据。似乎也不太难嘛，就此着手，开干。 2、代码示例 2.1 cshtml页面代码

@ViewBag.Title@H_<a href="https://www.jb51.cc/tag/403/" target="_blank" class="keywords">403</a>_72@ @Styles.Render("~/Content/css") @Styles.Render("~/Content/table-css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/knockout") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/bootstrap-table") @RenderSection("Scripts",false) </head> <body> @RenderBody() </body> </html> <p>@{<br /> ViewBag.Title = "订单插单";<br /> Layout = "~/Views/Shared/_Layout.cshtml";<br /> }</p> <p>@Scripts.Render("~/bundles/Order/InsertOrder")<br /> @Styles.Render("~/bundles/Order/css")<br /> @Scripts.Render("~/Content/bootstrap/datepicker/js")<br /> @Styles.Render("~/Content/bootstrap/datepicker/css")</p> <p><script src="~/Content/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script></p> <p><div class="panel-body" style="padding-bottom:0px;"></p> <p><div class="panel panel-default" style="margin-bottom:0px;"><br /> <div class="panel-heading"><a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>条件</div><br /> <div class="panel-body container-fluid"><br /> <div class="row"><br /> <div class="col-md-3"><br /> <label for="txt_search_ordernumber" class="col-sm-4 control-label" style="margin-top:6px;">订单号</label><br /> <span class="col-sm-8"><br /> <input type="text" class="form-control" id="txt_search_ordernumber"><br /> </span></p> </div> <div class="col-md-3"> <label for="txt_search_bodynumber" class="col-sm-3 control-label" style="margin-top:6px;">车身号</label> <span class="col-sm-8"> <input type="text" class="form-control" id="txt_search_bodynumber"> </span> </div> <div class="col-md-3"> <label for="txt_search_vinnumber" class="col-sm-4 control-label" style="margin-top:6px;">VIN码</label> <span class="col-sm-8"> <input type="text" class="form-control" id="txt_search_vinnumber"> </span> </div> <div class="col-md-3"> <label for="txt_search_engin_code" class="col-sm-4 control-label" style="margin-top:6px;">发动机号</label> <span class="col-sm-8"> <input type="text" class="form-control" id="txt_search_engin_code"> </span> </div> </div> <div class="collapse" id="div_more_search"> <div class="row" style="margin-top:15px;"> <div class="col-md-3"> <label for="txt_search_import_startdate" class="col-sm-4 control-label" style="margin-top:6px;">导入时间</label> <span class="col-sm-8"> <input type="text" class="form-control datetimepicker" readonly id="txt_search_import_startdate"> </span> </div> <div class="col-md-3"> <label for="txt_search_import_enddate" class="col-sm-3 control-label" style="margin-top:6px;">至</label> <span class="col-sm-8"> <input type="text" class="form-control datetimepicker" readonly id="txt_search_import_enddate"> </span> </div> <div class="col-md-3"> <label for="txt_search_send_startdate" class="col-sm-4 control-label" style="margin-top:6px;">下发时间</label> <span class="col-sm-8"> <input type="text" class="form-control datetimepicker" readonly id="txt_search_send_startdate"> </span> </div> <div class="col-md-3"> <label for="txt_search_send_enddate" class="col-sm-4 control-label" style="margin-top:6px;">至</label> <span class="col-sm-8"> <input type="text" class="form-control datetimepicker" readonly id="txt_search_send_enddate"> </span> </div> </div> <p><div class="row" style="margin-top:15px;"><br /> <div class="col-md-3"><br /> <label for="txt_search_carcode" class="col-sm-4 control-label" style="margin-top:6px;">整车编码</label><br /> <span class="col-sm-8"><br /> <input type="text" class="form-control" id="txt_search_carcode"><br /> </span></p> </div> <div class="col-md-3"> <label for="txt_search_vms" class="col-sm-3 control-label" style="margin-top:6px;">VMS号</label> <span class="col-sm-8"> <input type="text" class="form-control" id="txt_search_vms"> </span> </div> <div class="col-md-3"> <label for="txt_search_trans_code" class="col-sm-4 control-label" style="margin-top:6px;">变速箱号</label> <span class="col-sm-8"> <input type="text" class="form-control" id="txt_search_trans_code"> </span> </div> </div> </div> <p><div class="row" style="float:right;margin-right:50px;margin-top:13px;"></p> <div> <button type="button" id="btn_query" class="btn btn-primary" style="margin-right:20px;width:100px;"><a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a></button> <button type="submit" id="btn_reset" class="btn btn-default" style="margin-right:20px;width:100px;">重置</button> </div> </div> </div> </div> <p><div class="collapse_div_outside"><br /> <div class="collapse_div_inside"></div><br /> <span id="span_collapse" href="#div_more_search" class="collapse_div_inside_ele">展开<label class="glyphicon glyphicon-menu-down"></label></span></p> </div> </div> <p>@*<div id="toolbar_left" class="btn-group"></p> </div>*@ <div id="toolbar_right" class="btn-group"> <button id="btn_cancel" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-backward aria-hidden="true"></span>撤销 </button> <button id="btn_insertorder" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>插单 </button> </div> <div class="panel-body" style="padding-top:0px;"> <div id="div_tableleft" class="col-md-6"> <table id="tb_order_left"></table> </div> <div id="div_tableright" class="col-md-6"> <table id="tb_order_right"></table> </div> </div> </pre> </div> <p><span style="color: #800000"><h3>2.2 js<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a></h3> </p> <div class="jb51code"> <pre class="brush:js;"> var i_statuindex = 0; //此数组用于保存撤销操作每一步的数据 var arrdata = []; <p>var m_oTable = null;</p> <p>$(function () {<br /> //1.初始化表格<br /> m_oTable = new TableInit();<br /> m_oTable.Init();</p> <p>//2.初始化按钮事件<br /> var oButtonInit = new ButtonInit();<br /> oButtonInit.Init();</p> <p>//3.日期控件的初始化<br /> $(".datetimepicker").datetimepicker({<br /> format: 'yyyy-mm-dd hh:ii',autoclose: true,todayBtn: true,});</p> <p>});</p> <p>//表格相关事件和<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a><br /> var TableInit = function () {<br /> var oTableInit = new Object();</p> <p>oTableInit.Init = function () {<br /> 　　　　 //初始化左边表格<br /> $('#tb_order_left').bootstrapTable({<br /> url: '/api/OrderApi/get',method: 'get',striped: true,cache: false,pagination: true,height: 600,uniqueId:"TO_ORDER_ID",queryParams: oTableInit.queryParams,queryParamsType: "limit",sidePagination: "server",pageSize: 10,pageList: [10,25,50,100],search: true,strictSearch: true,showColumns: true,showRefresh: true,minimumCountColumns: 2,clickToSelect: true,columns: [{<br /> check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>: true<br /> },{<br /> field: 'ORDER_NO',title: '订单号'<br /> },{<br /> field: 'BODY_NO',title: '车身号'<br /> },{<br /> field: 'VIN',title: 'VIN码'<br /> },{<br /> field: 'TM_MODEL_MATERIAL_ID',title: '整车编码'<br /> },{<br /> field: 'ORDER_TYPE',title: '订单类型'<br /> },{<br /> field: 'ORDER_STATUS',title: '订单状态'<br /> },{<br /> field: 'CREATE_DATE',title: '订单导入时间'<br /> },{<br /> field: 'PLAN_DATE',title: '订单计划上线日期'<br /> },{<br /> field: 'VMS_NO',title: 'VMS号'<br /> },{<br /> field: 'ENGIN_CODE',title: '发动机号'<br /> },{<br /> field: 'TRANS_CODE',title: '变速箱号'<br /> },{<br /> field: 'OFFLINE_DATE_ACT',title: '实际下线日期'<br /> },{<br /> field: 'HOLD_RES',title: 'hold理由'<br /> },{<br /> field: 'SPC_FLAG',title: '特殊<a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>'<br /> },],onLoadSuccess: function (data) {<br /> //表格加载完成之后初始化拖拽<br /> 　　　　　　　　　　oTableInit.InitDrag();<br /> }<br /> });<br /> 　　　　 //初始化右边表格<br /> $('#tb_order_right').bootstrapTable({<br /> url: '/api/OrderApi/get',toolbar: '#toolbar_right',queryParams: oTableInit.queryParamsRight,//ajaxOptions: { departmentname: "",statu: "" },columns: [<br /> {<br /> field: 'ORDER_NO',onLoadSuccess: function (data) {<br /> oTableInit.InitDrop();<br /> }<br /> });<br /> };<br /> //<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>表格行的draggable事件<br /> oTableInit.InitDrag = function () {<br /> $('#tb_order_left tr').draggable({<br /> helper: "clone",start: function (event,ui) {<br /> var old_left_data = JSON.stringify($('#tb_order_left').bootstrapTable("getData"));<br /> var old_right_data = JSON.stringify($('#tb_order_right').bootstrapTable("getData"));<br /> var odata = { index: ++i_statuindex,left_data: old_left_data,right_data: old_right_data };<br /> arrdata.push(odata);<br /> },stop: function (event,ui) {</p> <p>}<br /> });<br /> };<br /> //<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>右边表格的droppable事件<br /> oTableInit.InitDrop = function () {<br /> $("#tb_order_right").droppable({<br /> drop: function (event,ui) {<br /> var arrtd = $(ui.helper[0]).find("td");<br /> var rowdata = {<br /> ORDER_NO: $(arrtd[1]).text(),BODY_NO: $(arrtd[2]).text(),VIN: $(arrtd[3]).text(),TM_MODEL_MATERIAL_ID: $(arrtd[4]).text(),ORDER_TYPE: $(arrtd[5]).text(),ORDER_STATUS: $(arrtd[6]).text(),CREATE_DATE: $(arrtd[7]).text() == "-" ? null : $(arrtd[7]).text(),PLAN_DATE: $(arrtd[8]).text() == "-" ? null : $(arrtd[8]).text(),VMS_NO: $(arrtd[9]).text(),ENGIN_CODE: $(arrtd[10]).text(),TRANS_CODE: $(arrtd[11]).text(),OFFLINE_DATE_ACT: $(arrtd[12]).text() == "-" ? null : $(arrtd[12]).text(),HOLD_RES: $(arrtd[13]).text(),SPC_FLAG: $(arrtd[14]).text(),TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid")</p> <p>};<br /> var oTop = ui.helper[0].offsetTop;<br /> var iRowHeadHeight = 40;<br /> var iRowHeight = 37;<br /> var rowIndex = 0;<br /> if (oTop <= iRowHeadHeight + iRowHeight / 2) {<br /> rowIndex = 0;<br /> }<br /> else {<br /> rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);<br /> }<br /> 　　　　　　　　　 //插入右边表格指定位置行数据<br /> $("#tb_order_right").bootstrapTable("insertRow",{ index: rowIndex,row: rowdata });<br /> $('#tb_order_left').bootstrapTable("removeByUniqueId",$(ui.helper[0]).attr("data-uniqueid"));<br /> oTableInit.InitDrag();<br /> }<br /> });<br /> };</p> <p>oTableInit.queryParams = function (params) { //配置参数<br /> var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的<br /> limit: params.limit,//<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>大小<br /> offset: params.offset,//<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a><br /> strBodyno: $("#txt_search_bodynumber").val(),strVin: $("#txt_search_vinnumber").val(),strOrderno: $("#txt_search_ordernumber").val(),strEngincode: $("#txt_search_engin_code").val(),strOrderstatus: 0,strTranscode: $("#txt_search_trans_code").val(),strVms: $("#txt_search_vms").val(),strCarcode: $("#txt_search_carcode").val(),strImportStartdate: $("#txt_search_import_startdate").val(),strImportEnddate: $("#txt_search_import_enddate").val(),strSendStartdate: $("#txt_search_send_startdate").val(),strSendEnddate: $("#txt_search_send_enddate").val(),};<br /> return temp;<br /> };</p> <p>oTableInit.queryParamsRight = function (params) { //配置参数<br /> var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的<br /> limit: params.limit,//<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a><br /> strBodyno: "",strVin: "",strOrderno: "",strEngincode: "",strOrderstatus: 5,strTranscode: "",strVms: "",strCarcode: "",strImportStartdate: "",strImportEnddate: "",strSendStartdate: "",strSendEnddate: "",};<br /> return temp;<br /> };</p> <p>return oTableInit;<br /> };</p> <p>//<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>按钮初始化事件<br /> var ButtonInit = function () {<br /> var oInit = new Object();<br /> var postdata = {};</p> <p>oInit.Init = function () {</p> <p>//<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>点击事件<br /> $("#btn_query").click(function () {<br /> $("#tb_order_left").bootstrapTable('refresh');<br /> });</p> <p>//重置点击事件<br /> $("#btn_reset").click(function () {<br /> $(".container-fluid").find(".form-control").val("");<br /> $("#tb_order_left").bootstrapTable('refresh');<br /> });<br /> //撤销操作点击事件<br /> $("#btn_cancel").click(function () {<br /> if (i_statuindex <= 0) {<br /> return;<br /> }<br /> for (var i = 0; i < arrdata.length; i++) {<br /> if (arrdata[i].index != i_statuindex) {<br /> continue;<br /> }<br /> var arr_left_data = eval(arrdata[i].left_data);<br /> var arr_right_data = eval(arrdata[i].right_data);</p> <p>$('#tb_order_left').bootstrapTable('removeAll');<br /> $('#tb_order_right').bootstrapTable('removeAll');<br /> $('#tb_order_left').bootstrapTable('append',arr_left_data);<br /> for (var x = 0; x < arr_right_data.length; x++) {<br /> $("#tb_order_right").bootstrapTable("insertRow",{ index: x,row: arr_right_data[x] });<br /> }</p> <p>//$('#tb_order_right').bootstrapTable('append',arr_right_data);//append之后不能drop<br /> break;<br /> }<br /> i_statuindex--;</p> <p>//重新<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>可拖拽<br /> m_oTable.InitDrag();<br /> //m_oTable.InitDrop();<br /> });</p> <p>//<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>栏展开收起点击事件<br /> $("#span_collapse").click(function () {<br /> if ($(this).text() == "收起") {<br /> $(this).html('展开<label class="glyphicon glyphicon-menu-down"></label>');<br /> $("#div_more_search").collapse('hide');<br /> }<br /> else {<br /> $(this).html('收起<label class="glyphicon glyphicon-menu-up"></label>');<br /> $("#div_more_search").collapse('show')<br /> }<br /> });<br /> };</p> <p>return oInit;<br /> };</p> </pre> </div> <p>我们重点来看几个地方的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>： <span style="color: #000000"><h3>2.2.1 左边表格加载成功之<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>表格行的可拖拽。</h3><span style="color: #800000"><h3> </h3></p> <div class="jb51code"> <pre class="brush:js;"> $('#tb_order_left tr').draggable({ helper: "clone",ui) { } }); </pre> </div> <p>在draggable的start事件中，我们将拖拽之前的左右表格中的数据全部保存到arrdata变量中，i_statuindex这个<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>用于记录当前这一步的索引，用于撤销操作。 <h3>2.2.2 右边表格在加载成功之后<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>表格的droppable事件</h3>　　　　</p> <div class="jb51code"> <pre class="brush:js;"> $("#tb_order_right").droppable({ drop: function (event,ui) { var arrtd = $(ui.helper[0]).find("td"); var rowdata = { ORDER_NO: $(arrtd[1]).text(),TO_ORDER_ID: $(ui.helper[0]).attr("data-uniqueid") <p>};<br /> var oTop = ui.helper[0].offsetTop;<br /> var iRowHeadHeight = 40;<br /> var iRowHeight = 37;<br /> var rowIndex = 0;<br /> if (oTop <= iRowHeadHeight + iRowHeight / 2) {<br /> rowIndex = 0;<br /> }<br /> else {<br /> rowIndex = Math.ceil((oTop - iRowHeadHeight) / iRowHeight);<br /> }<br /> $("#tb_order_right").bootstrapTable("insertRow",$(ui.helper[0]).attr("data-uniqueid"));<br /> oTableInit.InitDrag();<br /> }<br /> });</p> </pre> </div> <p>在drop事件时，取到当前拖过来的行数据，计算当前鼠标所在的位置，在右边表格指定位置插入拖过来的行数据。然后<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>左边表格拖过来的行数据。 <h3>2.2.3 撤销操作<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>　　</h3>　</p> <div class="jb51code"> <pre class="brush:js;"> //撤销操作点击事件 $("#btn_cancel").click(function () { if (i_statuindex <= 0) { return; } for (var i = 0; i < arrdata.length; i++) { if (arrdata[i].index != i_statuindex) { continue; } var arr_left_data = eval(arrdata[i].left_data); var arr_right_data = eval(arrdata[i].right_data); <p>$('#tb_order_left').bootstrapTable('removeAll');<br /> $('#tb_order_right').bootstrapTable('removeAll');<br /> $('#tb_order_left').bootstrapTable('append',arr_left_data);<br /> for (var x = 0; x < arr_right_data.length; x++) {<br /> $("#tb_order_right").bootstrapTable("insertRow",row: arr_right_data[x] });<br /> }<br /> //$('#tb_order_right').bootstrapTable('append',arr_right_data);//append之后不能drop<br /> break;<br /> }<br /> i_statuindex--;</p> <p>//重写<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>可拖拽<br /> m_oTable.InitDrag();<br /> });</p> </pre> </div> <p>撤销操作主要是通过<a href="https://www.jb51.cc/tag/quanjubianliang/" target="_blank" class="keywords">全局变量</a>arrdata里面的索引判断撤销到哪一步，然后根据索引取出当前步骤的左右表格数据，依次向两表格插入数据，然后i_statuindex依次递减，直至等于零，由于左边表格行数据全部重写加载过，所以需要重新<a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>可拖拽事件。就是这么简单的三步就能实现想要的<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>，是不是很简单~~</p> <p>如果大家还想深入学习，可以点击<a target="_blank" href="//www.jb51.cc/article/84087.htm">这里</a>进行学习，再为大家附两个精彩的专题：<a target="_blank" href="//www.jb51.cc/Special/334.htm">Bootstrap学习教程</a> <a target="_blank" href="//www.jb51.cc/Special/769.htm">Bootstrap实战教程</a> </p> <p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助。</p><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/bootstrap/51243.html</div> <div class="topcard-tags"><a href="https://www.f2er.com/tag/bootstrap/" class="tag_link" target="_blank">bootstrap</a><a href="https://www.f2er.com/tag/bootstrapp/" class="tag_link" target="_blank">bootstrap</a><a href="https://www.f2er.com/tag/table/" class="tag_link" target="_blank">table</a><a href="https://www.f2er.com/tag/tablep/" class="tag_link" target="_blank">table</a><a href="https://www.f2er.com/tag/ptable/" class="tag_link" target="_blank">table</a><a href="https://www.f2er.com/tag/ptablep/" class="tag_link" target="_blank">table</a></div> <ul class="list-group"> <li class="list-group-item"><a href="https://www.f2er.com/bootstrap/51246.html" title="JS组件Bootstrap实现弹出框和提示框效果代码">上一篇：JS组件Bootstrap实现弹出框和提示框</a><a href="https://www.f2er.com/bootstrap/51240.html" title="JS组件Bootstrap Table表格多行拖拽效果实现代码" class="text-muted pull-right">下一篇：JS组件Bootstrap Table表格多行拖拽</a> </li> </ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的Bootstrap相关文章</h1></div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997481.html" title="使用BootStrapValidator来完成前端输入验证"><div class="title">使用BootStrapValidator来完成前端输入验证</div> <div class="summary">BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997480.html" title="顶求网首页整体设计思路"><div class="title">顶求网首页整体设计思路</div> <div class="summary">顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997479.html" title="自己手写简约实用的Jquery tabs插件（基于bootstrap环境）"><div class="title">自己手写简约实用的Jquery tabs插件（基于bootstrap环境）</div> <div class="summary">一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997478.html" title="BootStrap中Affix控件的使用方法及如何保持布局的美观"><div class="title">BootStrap中Affix控件的使用方法及如何保持布局的美观</div> <div class="summary">在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997477.html" title="针对BootStrap中tabs控件的美化和完善"><div class="title">针对BootStrap中tabs控件的美化和完善</div> <div class="summary">BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="https://www.f2er.com/bootstrap/997475.html" title="使用BootStrap制作用户登录UI"><div class="title">使用BootStrap制作用户登录UI</div> <div class="summary">先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997474.html" title="打造简单实用的Thinkphp分页样式(Bootstrap版本)"><div class="title">打造简单实用的Thinkphp分页样式(Bootstrap版本)</div> <div class="summary">先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997473.html" title="Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js"><div class="title">Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js</div> <div class="summary">在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997472.html" title="移动开发中单页异步加载所有列表项"><div class="title">移动开发中单页异步加载所有列表项</div> <div class="summary">在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/bootstrap/997471.html" title="仿豆瓣分类标签的实现"><div class="title">仿豆瓣分类标签的实现</div> <div class="summary">为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...</div> <time class="summary">作者：前端之家 时间：2021-02-18</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div> <!-- left end--> <!-- right --> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="https://www.f2er.com/html/" title="HTML">HTML</a><a href="https://www.f2er.com/html5/" title="HTML5">HTML5</a><a href="https://www.f2er.com/js/" title="JavaScript">JavaScript</a><a href="https://www.f2er.com/css/" title="CSS">CSS</a><a href="https://www.f2er.com/jquery/" title="jQuery">jQuery</a><a href="https://www.f2er.com/bootstrap/" title="Bootstrap">Bootstrap</a><a href="https://www.f2er.com/angularjs/" title="Angularjs">Angularjs</a><a href="https://www.f2er.com/typescript/" title="TypeScript">TypeScript</a><a href="https://www.f2er.com/vue/" title="Vue">Vue</a><a href="https://www.f2er.com/dojo/" title="Dojo">Dojo</a><a href="https://www.f2er.com/json/" title="Json">Json</a><a href="https://www.f2er.com/electron/" title="Electron">Electron</a><a href="https://www.f2er.com/nodejs/" title="Node.js">Node.js</a><a href="https://www.f2er.com/extjs/" title="extjs">extjs</a><a href="https://www.f2er.com/express/" title="Express ">Express </a><a href="https://www.f2er.com/xml/" title="XML">XML</a><a href="https://www.f2er.com/es6/" title="ES6">ES6</a><a href="https://www.f2er.com/ajax/" title="Ajax">Ajax</a><a href="https://www.f2er.com/flash/" title="Flash">Flash</a><a href="https://www.f2er.com/unity/" title="Unity">Unity</a><a href="https://www.f2er.com/react/" title="React">React</a><a href="https://www.f2er.com/flex/" title="Flex">Flex</a><a href="https://www.f2er.com/antdesign/" title="Ant Design">Ant Design</a><a href="https://www.f2er.com/webfrontend/" title="Web前端">Web前端</a><a href="https://www.f2er.com/weapp/" title="微信小程序">微信小程序</a><a href="https://www.f2er.com/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.f2er.com/bootstrap/997481.html" title="使用BootStrapValidator来完成前端输入验证" target="_blank">• 使用BootStrapValidator来</a></li> <li><a href="https://www.f2er.com/bootstrap/997480.html" title="顶求网首页整体设计思路" target="_blank">• 顶求网首页整体设计思路</a></li> <li><a href="https://www.f2er.com/bootstrap/997479.html" title="自己手写简约实用的Jquery tabs插件（基于bootstrap环境）" target="_blank">• 自己手写简约实用的Jquery</a></li> <li><a href="https://www.f2er.com/bootstrap/997478.html" title="BootStrap中Affix控件的使用方法及如何保持布局的美观" target="_blank">• BootStrap中Affix控件的使</a></li> <li><a href="https://www.f2er.com/bootstrap/997477.html" title="针对BootStrap中tabs控件的美化和完善" target="_blank">• 针对BootStrap中tabs控件的</a></li> <li><a href="https://www.f2er.com/bootstrap/997476.html" title="BootStrap简介及应用要点" target="_blank">• BootStrap简介及应用要点</a></li> <li><a href="https://www.f2er.com/bootstrap/997475.html" title="使用BootStrap制作用户登录UI" target="_blank">• 使用BootStrap制作用户登录</a></li> <li><a href="https://www.f2er.com/bootstrap/997474.html" title="打造简单实用的Thinkphp分页样式(Bootstrap版本)" target="_blank">• 打造简单实用的Thinkphp分</a></li> <li><a href="https://www.f2er.com/bootstrap/997473.html" title="Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js" target="_blank">• Bootstrap轮播（carousel）</a></li> <li><a href="https://www.f2er.com/bootstrap/997472.html" title="移动开发中单页异步加载所有列表项" target="_blank">• 移动开发中单页异步加载所</a></li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="https://www.f2er.com/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="https://www.f2er.com/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="https://www.f2er.com/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="https://www.f2er.com/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="https://www.f2er.com/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="https://www.f2er.com/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="https://www.f2er.com/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="https://www.f2er.com/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="https://www.f2er.com/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="https://www.f2er.com/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="https://www.f2er.com/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="https://www.f2er.com/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="https://www.f2er.com/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="https://www.f2er.com/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="https://www.f2er.com/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="https://www.f2er.com/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="https://www.f2er.com/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="https://www.f2er.com/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="https://www.f2er.com/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="https://www.f2er.com/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="https://www.f2er.com/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="https://www.f2er.com/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="https://www.f2er.com/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="https://www.f2er.com/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="https://www.f2er.com/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="https://www.f2er.com/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="https://www.f2er.com/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="https://www.f2er.com/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="https://www.f2er.com/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="https://www.f2er.com/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- f2er-rightads --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> </div> <!-- right end --> </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="https://www.f2er.com/faq/884225.html" title="jQuery选择伪元素：after" target="_blank">· jQuery选择伪元素：after</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884224.html" title="JavaScript随机颜色生成器" target="_blank">· JavaScript随机颜色生成器</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884223.html" title="JavaScript指数" target="_blank">· JavaScript指数</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884222.html" title="addResourceHandlers无法解析静态资源" target="_blank">· addResourceHandlers无法解析静态资源</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884221.html" title="如何将字节数组转换为MultipartFile" target="_blank">· 如何将字节数组转换为MultipartFile</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884220.html" title="在java中如何创建一个文件并写入内容？" target="_blank">· 在java中如何创建一个文件并写入内容？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884219.html" title="星号*在Python中是什么意思？" target="_blank">· 星号*在Python中是什么意思？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884218.html" title="Flask框架：MVC模式" target="_blank">· Flask框架：MVC模式</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884217.html" title="在JavaScript对象数组中按ID查找对象" target="_blank">· 在JavaScript对象数组中按ID查找对象</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884216.html" title="使用Javascript / jQuery下载文件" target="_blank">· 使用Javascript / jQuery下载文件</a><span class="text-muted pull-right">10-20</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="https://www.f2er.com/js/base.js"></script> </body> </html>