问Bootstrap data-filter和portfolio项目类

EN

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