分类展示

实现过程

文章分类展示部分采用了BootStrap原生的信息按钮（btn-info）,当鼠标悬停时变色，点击则转向相应的二级页面，代码如下：

<div class="col-md-4" style="float:right;">
  <div> 
    <H5>分 类</H5>
    <div style="font-size:14px;" id="blogclas">
        <a style="margin-left:5px; margin-bottom:5px;" class="btn btn-info col-md-3" href="二级页面地址" role="button">分类名</a>
           <!--其他分类信息-->
   </div>
  </div>
</div>

代码分析

由代码可知，分类区域占有的宽度为（4/12）col-md-4，而其中的单个分类又占有其中的（3/12） col-md-3，也就是每4个分类占一行（实际上由于分类之间要有间隔，只能是3个分类占一行）。其效果图如下所示：