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

bootstrap

2016-07-03 14:10 363 查看

bootstrap是目前很流行的一个前端框架，它兼容性好，同时兼容pc端和移动端

引入bootstrap相关js和css

<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="../bootstrap-3.3.5/dist/css/bootstrap.css">
<script src="../js/jquery-1.12.1.js"></script>
<script src="../bootstrap-3.3.5/dist/js/bootstrap.js"></script>
<script src="../bootstrap-3.3.5/js/bootstrap-paginator.min.js"></script><!--分页插件-->

需要的HTML文本

这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。

<body>
<div class="container">
<!--table-hover鼠标悬停  table-striped奇偶行颜色不一样  table-condensed缩紧表格-->
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr><th>姓名</th><th>生日</th><th>职务</th><th>工资</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
<tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
<tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
<tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
<tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
</tbody>
</table>
<div style="font-size: 20px;text-align: right">
<ul class="pagination" id="pageUL"></ul>
</div>
</div>
</body>
</html>

相应的js代码

<script>
var ops = {
bootstrapMajorVersion:3, //指明使用bootstrap的版本
currentPage:1,           //默认的页码
numberOfPages:5,         //页面上显示的页码数
totalPages:8,            //总页数
onPageClicked:function(e,oevent,type,page){//点击页码，需要完成的业务
alert("page:"+page);  //page为用户点中的页码
}
};

$(function(){
$("#pageUL").bootstrapPaginator(ops);
});
</script>

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

标签：

相关文章推荐

新的分享

章节导航