功能强大的Bootstrap效果展示（二）(2)

<ul> <li> <a href="#" aria-label="Previous"> <!--向左的双箭头--> <span aria-hidden="true">&laquo;</span> </a> </li> <!--第一个选项被激活--> <li><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="#">6</a> </li> <li><a href="#">7</a> </li> <li> <a href="#" aria-label="Next"> <!--向右的双箭头--> <span aria-hidden="true">&raquo;</span> </a> </li> </ul>

这是只有上一页和下一页的

<ul> <li><a href="#"><span aria-hidden="true">&larr;</span>上一页</a> </li> <li><a href="#"><span aria-hidden="true">&rarr;</span>下一页 </a> </li> </ul>

上面的写法是两个按钮连在一起的
下面的写法是两个按钮分布在两侧

<ul> <li><a href="#"><span aria-hidden="true">&larr;</span>上一页</a> </li> <li><a href="#"><span aria-hidden="true">&rarr;</span>下一页 </a> </li> </ul>

6.列表

列表的效果十分常见，用起来也十分简单

<div> <!--第一项被选中--> <a href="#">访问统计</a> <a href="#">信息统计</a> <a href="#">日志统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> <a href="#">信息统计</a> </div>

我用上面的组件做了一个后台的静态网页

效果如图

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程