您的位置:首页 - 教程 - Bootstrap - 正文
Bootstrap上一篇下一篇两端对齐按钮样式
效果:
http://hovertree.com/texiao/bootstrap/7/

使用方法:
首先引用bootstrap:
<link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

下面是html代码:
<ul class="pager">
<li class="previous"><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" id="htPre">&larr; 上一篇</a></li>
<li class="next"><a href="http://hovertree.com/h/bjaf/f98v13ww.htm" id="htNext">下一篇 &rarr;</a></li>
</ul>


bootstrap下载:
http://hovertree.com/h/bjaf/bootstrap336.htm

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap上一篇下一篇两端对齐按钮样式_何问起</title><base target="_blank"/>
<meta charset="utf-8" />
<link href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.hovertreeinfo{
max-width:800px;
margin:50px auto;
text-align:center;
border:1px solid silver;
}
</style>
</head>
<body>
<div class="hovertreeinfo">
<h1>Bootstrap上一篇下一篇两端对齐按钮样式</h1>
更多Bootstrap文章请上 何问起 网:<a href="http://hovertree.com">hovertree.com</a>
<br /><a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com/h/bjaf/bsprenext.htm">原文代码</a>
<ul class="pager">
<li class="previous"><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" id="htPre">&larr; 上一篇</a></li>
<li class="next"><a href="http://hovertree.com/h/bjaf/f98v13ww.htm" id="htNext">下一篇 &rarr;</a></li>
</ul>
</div>
</body>
</html>

评论: