页码编写

一个页面写完了要编写一个美美的页码怎么破呢?

<div class="btn-toolbar page-bar" id="page_bar_datalist1">
    <div class="btn-group">
        <button disabled="disabled" class="btn btn-sm first" type="button" data-func="first">
            <span class="glyphicon glyphicon-step-backward"></span>
        </button>
        <button disabled="disabled" class="btn btn-sm prev" type="button" data-func="prev">
            <span class="glyphicon glyphicon-triangle-left"></span>
        </button>
    </div>
        <span class="form-control-static">1 / 2 页 共 16 条</span>
    <div class="btn-group">
        <button class="btn btn-sm next" type="button" data-func="next">
            <span class="glyphicon glyphicon-triangle-right"></span>
        </button>
        <button class="btn btn-sm last" type="button" data-func="last">
            <span class="glyphicon glyphicon-step-forward"></span></button>
    </div>
    <div class="btn-group">
        <input class="form-control input-sm" type="text" size="3" maxlength="5">
    </div>
    <div class="btn-group">
        <button class="btn btn-sm" type="button" data-func="go">转到</button>
    </div>
    <div class="btn-group custom"></div>
</div>

以上就是页码编写的全部编码啦

还有一个类似的

<nav>
  <ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
  </ul>
</nav>感觉这个要简单一些