频道导航

Bootstrap table使用方法记录

2019-01-07 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了Bootstrap table使用方法记录，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了Bootstrap table的使用方法，供大家参考，具体内容如下

@section styles{

}

<div class="main">
<div id="toolbar" class="btn-group">
<button id="addProductBtn" type="button" class="btn btn-default" onclick="showAddModal()">
<span class="glyphicon glyphicon-plus" aria-hidden="true">新增产品

名称： (最多20个字)

<span class="tips" >(最多150个字)</span>
        </div>
        <div class="form-group">
          <label for="prodType" class="col-md-2">类型：</label>
          <select class="form-control" id="prodType">
            <option value="1001">普通产品</option>
            <option value="1002">明星产品</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></button>
        <button id="modalSubmitBtn" type="button" class="btn btn-primary">{{modalBtn}}</button>
      </div>
    </div>
  </div>
</div>
<p>@section scripts{<br />
<script type="text/javascript" src="~/Scripts/bootstrap-table.js"></script><br />
<script type="text/javascript" src="~/Scripts/bootstrap-table-zh-CN.js"></script><br />
<script type="text/javascript" src="~/Scripts/common.js"></script><br />
<script type="text/javascript" src="~/Views/Home/index.js"></script><br />
}</p>
</pre>
</div>
<p>JS<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：</p>
<div class="jb51code">
<pre class="brush:js;">
/*index.js*/
<p>$(document).ready(function () {<br />
var $table = $('#table');<br />
var textLength = 30;  //技术参数默认折叠显示长度</p>
<p>$table.bootstrapTable({<br />
locale: 'zh-CN',url: '/product/getList',method: 'post',contentType: 'application/json',dataType: "json",toolbar: '#toolbar',//工具按钮用哪个容器<br />
pagination: true,search: true,showRefresh: true,sidePagination: "server",//分页方式：client客户端分页，server服务端分页<br />
singleSelect: true,//单行选择<br />
pageNumber: 1,//初始化加载第一页，默认第一页<br />
pageSize: 10,//每页的记录行数<br />
pageList: [5,10,20],queryParams: function (params) {  //请求参数<br />
var temp = {<br />
pageSize: params.limit,//页面大小<br />
pageNo: params.offset / params.limit + 1,//页码<br />
search: $('.search input').val()<br />
};</p>
<pre><code>  return temp;
},responseHandler: function (res) {
  return {
    pageSize: res.pageSize,pageNumber: res.pageNo,total: res.total,rows: res.rows
  };
},columns: [
  {
    title: '产品编号',field: 'id'
  },{
    title: '产品名称',width: 200,field: 'name'
  },{
    title: '技术参数',field: 'tecParam',width: 300,formatter: tecParamFormatter,events: {
      "click .toggle": toggleText
    }
  },{
    title: '类型',field: 'type',formatter: typeFormatter
  },{
    title: '操作',formatter: operateFormatter,events: {
      "click .mod": showUpdateModal,"click .delete": deleteProduct
    }
  }
]</code></pre>
<p>});</p>
<p>function tecParamFormatter(value,row,index) {<br />
if (value != null && value.length > 30) {<br />
return '<span class="tec-param">' + value.substr(0,textLength) + '...</span><a class="toggle" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >展开</a>';<br />
}<br />
return value;<br />
}</p>
<p>function toggleText(e,value,index) {<br />
if (value == null) {<br />
return false;<br />
}</p>
<pre><code>var $tecParam = $(this).prev(".tec-param"),$toggle = $(this);

if ($tecParam.text().length > textLength + 5) { //折叠
  $tecParam.text(value.substr(0,textLength) + "...");
  $toggle.text("展开");
}
else if (value.length > textLength + 5 && $tecParam.text().length <= textLength + 5) {  //展开
  $tecParam.text(value);
  $toggle.text("折叠");
}</code></pre>
<p>}</p>
<p>function typeFormatter(value,index) {<br />
var type = "";<br />
if (value == "1001")<br />
type = "普通产品";<br />
else if (value == "1002")<br />
type = "明星产品";<br />
return type;<br />
};</p>
<p>function operateFormatter (value,index) {<br />
return '<a class="mod btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a> '</p>
<ul>
<li>'<a class="delete btn btn-danger" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>';<br />
};</li>
</ul>
<p>function showUpdateModal (e,index) {<br />
$("#productModalLabel").text("更新产品信息");<br />
$("#modalSubmitBtn").text("更新");</p>
<pre><code>$("#prodId").val(row.id);
$("#prodId").attr("disabled",true);  //禁止修改id
$("#prodName").val(row.name);
$("#prodTecParam").val(row.tecParam);
if (row.type == 1001)
  $("#prodType").find('option[value="1001"]').attr("selected",true);
else if (row.type == 1002)
  $("#prodType").find('option[value="1002"]').attr("selected",true);

$("#modalSubmitBtn").unbind();
$("#modalSubmitBtn").on("click",updateProduct);

$("#productModal").modal("show");</code></pre>
<p>};</p>
<p>function deleteProduct (e,index) {<br />
var product = {<br />
id: row.id<br />
};<br />
if (product.id === null || product.id === "") {<br />
return false;<br />
}</p>
<pre><code>Common.confirm({
  message: "确认删除该产品？",operate: function (result) {
    if (result) {
      $.ajax({
        type: "post",url: "/product/delete",contentType: "application/json",data: JSON.stringify(product),success: function (data) {
          if (data !== null) {
            if (data.result) {
              $("#table").bootstrapTable("refresh",{ silent: true });
              tipsAlert('alert-success','提示','删除成功！');
            }
            else {
              tipsAlert('alert-warning','删除失败！');
            }
          }
        },error: function (err) {
          tipsAlert('alert-danger','警告','服务器异常，请稍后再试！');
          console.log("error：",err.statusText);
        }
      });

return true;
    }
    else {
      return false;
    }
  }
});</code></pre>
<p>};</p>
<p>var $search = $table.data('bootstrap.table').$toolbar.find('.search input');<br />
$search.attr('placeholder','请输入编号、产品名称、技术参数搜索');<br />
$search.css('width','400');</p>
<p>$(".model .form-group input").on("click",function(){<br />
$(this).next(".tips").text("");<br />
});<br />
});</p>
<p>var showAddModal = function () {<br />
$("#productModalLabel").text("新增产品");<br />
$("#modalSubmitBtn").text("新增");</p>
<p>$("#prodId").val('');<br />
$("#prodName").val('');<br />
$("#prodTecParam").val('');</p>
<p>$("#modalSubmitBtn").unbind();<br />
$("#modalSubmitBtn").on("click",addProduct);</p>
<p>$("#productModal").modal("show");<br />
};</p>
<p>var addProduct = function () {<br />
var product = {<br />
name: $("#prodName").val(),tecParam: $("#prodTecParam").val(),type: $("#prodType").val()<br />
};<br />
if (product.name == null || product.name == "") {<br />
$("#prodName").next(".tips").text("产品名称不能为空！");<br />
return false;<br />
}<br />
if (product.name.length > 20) {<br />
$("#prodName").next(".tips").text("最多20个字!");<br />
return false;<br />
}<br />
if (product.tecParam.length > 150) {<br />
$("#prodTecParam").next(".tips").text("最多150个字!");<br />
return false;<br />
}</p>
<p>$.ajax({<br />
type: "post",url: "/product/add",success: function (data) {<br />
if (data !== null) {<br />
if (data.result) {<br />
$("#table").bootstrapTable("refresh",{ silent: true });<br />
$("#productModal").modal('hide');<br />
$("#prodId").val('');<br />
$("#prodName").val('');<br />
$("#prodTecParam").val('');<br />
tipsAlert('alert-success','新增成功！');<br />
}<br />
else {<br />
tipsAlert('alert-warning','新增失败！');<br />
}<br />
}<br />
},error: function (err) {<br />
tipsAlert('alert-danger','服务器异常，请稍后再试！');<br />
console.log("error：",err.statusText);<br />
}<br />
});<br />
};</p>
<p>var updateProduct = function () {<br />
var product = {<br />
id: $("#prodId").val(),name: $("#prodName").val(),url: "/product/update",'<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>成功！');<br />
}<br />
else {<br />
tipsAlert('alert-warning','<a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>失败！');<br />
}<br />
}<br />
},err.statusText);<br />
}<br />
});<br />
};</p>
</pre>
</div>
<p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/bootstrap/36896.html</div>
      <div class="topcard-tags"><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/36931.html" title="bootstrap3-dialog-master模态框使用详解">上一篇：bootstrap3-dialog-master模态框使</a><a href="https://www.f2er.com/bootstrap/36892.html" title="bootstrap fileinput实现文件上传功能" class="text-muted pull-right">下一篇：bootstrap fileinput实现文件上传功</a>
    
    </li>
    </ul>
              </div>
            </div>
          </div>
          
          
          <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>
        
        
        
        <div class="col-sm-12 col-md-12 col-lg-3">
          
          <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>
          
         
          <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-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>
          
          
          
          <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>

<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>
          
          
          
         
          <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-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>
          
          
          </div>
        
        </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>

</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>