您的位置：首页 > Web前端 > BootStrap

Bootstrap CSS——分页与标签

2015-10-07 20:27 435 查看

分页：http://v3.bootcss.com/components/#pagination

标签：http://v3.bootcss.com/components/#labels

mark

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<nav>
<ul class="pagination pagination-lg">
<!--向左，laquo，向右，raquo-->
<li><a href="#">«</a> </li>
<li class="active"><a href="#">1</a> </li>
<!--禁用则加disabled的class-->
<li class="disabled"><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">»</a> </li>
</ul>
</nav>

<nav>
<ul class="pagination">
<!--向左，laquo，向右，raquo-->
<li><a href="#">«</a> </li>
<li class="active"><a href="#">1</a> </li>
<!--禁用则加disabled的class-->
<li class="disabled"><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">»</a> </li>
</ul>
</nav>

<nav>
<ul class="pagination pagination-sm">
<!--向左，laquo，向右，raquo-->
<li><a href="#">«</a> </li>
<li class="active"><a href="#">1</a> </li>
<!--禁用则加disabled的class-->
<li class="disabled"><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">»</a> </li>
</ul>
</nav>

<nav>
<!--单纯的翻页效果-->
<ul class="pager">
<li><a href="#">上一页</a> </li>
<li><a href="#">下一页</a> </li>
</ul>
</nav>

<nav>
<!--带箭头-->
<ul class="pager">
<li class="previous"><a href="#">←向前</a> </li>
<li class="next"><a href="#">→向后</a> </li>
</ul>
</nav>

<!--标签-->
<span class="label label-default">
label-default
</span>
<span class="label label-info">
label-info
</span>
<span class="label label-success">
label-success
</span>
<span class="label label-danger">
label-danger
</span>

<!--标签用于标题后面-->
<h3>这是一个主题<span class="label label-default">描述</span></h3>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap css 分页

相关文章推荐

新的分享

章节导航