我已经下载了一个bootstrap模板,这是用于过滤的代码。我不理解有关相同TAG的投资组合项目类的评论。我看不出我会在哪里添加这个?
<!-- CONTENT CONTAINER-->
<div class="container">
<!-- FILTER-->
<!-- just add your TAG to data-filter="ADD HERE" -->
<!-- and then add your same TAG to portfolio item class="ADD HERE" - ->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default text-center">
<div class="panel-body">
<div class="proj">
<div id="filters">
<a href="#" data-filter="*" class=" active btn btn-danger">Show All</a>
<a href="#" data-filter=".graphics" class="btn btn-danger">Graphics</a>
<a href="#" data-filter=".web" class="btn btn-danger">Web</a>
<a href="#" data-filter=".ui" class="btn btn-danger">UI</a>
<a href="#" data-filter=".design" class="btn btn-danger">Design</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END: FILTER-->
<!--###################-->
<!-- START PORTFOLIO -->
<!--###################-->
<div id="container-folio" style="position:relative">
<!-- portfolio item -->
<div class="box col-xs-6 col-md-4 col-sm-6 col-lg-3 graphics design">
<!-- START WRAPPER IMG THUMBNAIL-->
<div class="thumbnail">
<!-- NAV LINKS -->
<div class="plus">
<a href="#" title="read more" class="btn btn-lg btn- info"><i class="icon-link"></i></a>
<a href="#" title="enlarge" class="btn btn-lg btn- primary"><i class="icon-eye-open"></i></a>
</div>
<!-- /NAV LINKS -->
<!-- / IMAGE-->
<img class="img-responsive" src="http://lorempixel.com/560/420/fashion/10" alt="">
<!-- / IMAGE-->
答案 0 :(得分:0)
我在我的工作项目中使用过这个模板。这里的解释是: 您可以通过数据过滤器
将过滤器链接绑定到每个相关项目data-filter=".graphics"
通过将类名添加到网格列div:
,将每个项目绑定到其过滤器链接离。此项目是图形和设计过滤器的项目
<div class="box col-xs-6 col-md-4 col-sm-6 col-lg-3 graphics design">