Question

我正在寻找最简单的解决方案，对每个页面上显示的div和3中的项目进行分页。是否有使用bootstrap的简单解决方案？

＆＃13;

<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">



</div>

    
 <div class="row"><a class="btn btn-default btn-lg col-md-11 col-md-offset-1" href="" role="button" style="margin-bottom:15px;"><img class="img-responsive" src="http://placehold.it/100x100" /></a></div>

<div class="row"><a class="btn btn-default btn-lg col-md-11 col-md-offset-1" href="" role="button" style="margin-bottom:15px"><img class="img-responsive" src="http://placehold.it/100x100" /></a></div>
    

       
  <div class="row"><a class="btn btn-default btn-lg col-md-11 col-md-offset-1" href="" role="button" style="margin-bottom:15px"><img class="img-responsive" src="http://placehold.it/100x100" /></a></div>   
  
  <button>1</button>  <button>2</button>
  
    
 <div class="row"><a class="btn btn-default btn-lg col-md-11 col-md-offset-1" href="" role="button" style="margin-bottom:15px"><img class="img-responsive" src="http://placehold.it/100x100" /></a></div>   
    
<div class="row"><a class="btn btn-default btn-lg col-md-11 col-md-offset-1" href="" role="button" style="margin-bottom:15px"><img class="img-responsive" src="http://placehold.it/100x100" /></a></div>   
</div>
</div>

＆＃13;

Answer 1

这是一个关于如何使用bootstrap和jQuery编写它的小样本。

$("[show]").click(function () {
  $("[show-tether]").hide();
  $("[show-tether='"+$(this).attr("show")+"']").show()
})[0].click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div show-tether="1">
  <img class="img-responsive" src="http://placehold.it/100x100" />
</div>

<div show-tether="2">
  Second page: <br />
  <img class="img-responsive" src="http://placehold.it/100x100" />
</div>

<ul class="pagination">
  <li><a href="#" show="1">1</a></li>
  <li><a href="#" show="2">2</a></li>
</ul>

simplets解决方案，用于在页面上显示或分页3个项目

1 个答案: