Question

我正在研究在我的网站上发布一些文章的方法，但我无法控制我在网上找到的这个示例代码片段，它应该根据主题过滤项目，但不知道如何做到这一点。例如，单击“作业”应仅过滤有关作业的消息，但该标记我定义属于哪个类别？如何按功能过滤功能？

此处的完整示例 code

    <div class="container"> 

  <div class="row">
    <div class="col-md-3">

      <h4 class="">Search</h4>

      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
      <button type="button" class="btn btn-default btn-sm btn-block hidden-lg hidden-md" data-toggle="collapse" data-target="#demo">Refine your search <span class="caret"></span>

      </button>

      <div id="demo" class="collapse in">
        <hr>
        <div class="list-group list-group">
          <h4 class="">Category</h4>
          <a href="#" class="list-group-item"><span class="badge">14</span> Notices <span class="label label-primary">New</span></a>
          <a href="#" class="list-group-item"><span class="badge">3</span> Jobs</a> 
          <a href="#" class="list-group-item"><span class="badge">25</span> Third item</a>

          <div id="categories" class="collapse">

            <a href="#" class="list-group-item"><span class="badge">14</span> Active item</a>



          <button class="btn btn-default btn-sm btn-block" data-toggle="collapse" data-target="#categories">More <span class="caret"></span></button>

          <hr class="">
          <h4 class="">Viewing Options</h4>
          <a href="#" class="list-group-item"><span class="badge">14</span> Upcoming Sessions</a>

          <a href="#" class="list-group-item"><span class="badge">3</span> OnDemand</a>
          <hr class=""> 
          <a href="#" class="list-group-item">Archived Courses</a>
          <a href="#" class="list-group-item">Courses In Development</a>
        </div>
      </div>



      <div class="hidden-sm hidden-xs">

        <hr>

        <div class="well">

          <h4>Premium Membership</h4>
          <p>Gain unlimited access to our entire course library.</p>
          <button class="btn btn-sm btn-warning">Learn more</button>

          <hr>
          <p class="text-center ">Already a member? <a href="#">Sign in.</a></p>
        </div>

         <hr>

        <div class="well">

          <h4>Course Catalog</h4>
          <p><a href="#"><img src="http://placehold.it/400X500" class="img-responsive"></a></p>

          <p>Everything you need to know about our webinars, including speaker bios, topics, and courses.</p>

          <button class="btn btn-sm btn-block btn-warning">Download</button>
        </div>

        <hr>

        <h4 class="text-center">CPE Partners</h4>

        <p><a href="#"><img class="center-block" src="http://placehold.it/100X100"></a></p>



      </div>

    </div>
    <div class="col-md-9">


      <div class="well hidden-xs"> 

        <div class="row">

          <div class="col-xs-4">


            <select class="form-control">
              <option>Featured</option>
              <option>Recently Added</option>
              <option>Next Upcoming Session</option>
              <option>A-Z</option>
              <option>Z-A</option>
            </select>
          </div>
          <div class="col-xs-8">
            <div class="btn-group pull-right">
              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-th"></span></button>
              <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-th-list"></span></button>
              <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-list"></span></button>

            </div>
          </div>

        </div>





      </div>

      <hr>


            <div class="row">
        <div class="col-sm-4"><a href="#" class=""><img src="http://placehold.it/1280X720" class="img-responsive"></a>
        </div>
        <div class="col-sm-8">
          <h3 class="title">How to Fight Fraud with Artificial Intelligence and Intelligent Analytics</h3>
          <p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium Members</p>
          <p>Could card.</p>

          <p class="text-muted">Presented by <a href="#">Ellen Richey</a></p>

        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-sm-4"><a href="#" class=""><img src="http://placehold.it/1280X720" class="img-responsive"></a>
        </div>
        <div class="col-sm-8">
          <h3 class="title">Big Payment Data: Leveraging Transactional Data to Ensure an Enterprise Approach to Risk Management</h3>
          <p class="text-muted"><span class="glyphicon glyphicon-calendar"></span> July 23, 2014 @ 1:30 PM</p>
          <p> risk increases year over year, the amount of data being collected increases as well.
            </p><p class="text-muted">Presented by <a href="#">Mike Braatz</a>, <a href="#">Jonathan Eber</a></p>

        </div>
      </div>      

      <ul class="pagination pagination-lg pull-right">
        <li><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">»</a></li>
      </ul>

    </div>
  </div>
</div>

在bootstrap中按类别过滤文本组

0 个答案: