bootstrap2 升级到bootstrap3 分页pagination 与Angular UI 不兼容

这两天在做一个新的系统，从原有系统基础上进行修改，原来用的是Bootstrap2，现在升级到Bootstrap3，但是部分UI元素出现了不兼容的问题，比较麻烦的是分页这个功能：

配合的是Angular JS，原来的分页功能，现在还能用，功能正常，但页面显示混乱了，初步判断是CSS升级之后造成的。

以下是原来的分页代码：

<pagination 
	boundary-links="true" 
	on-select-page="search(page)" 
	num-pages="queryResult.noOfPages" 
	max-size="20" 
	rotate="false"
        current-page="queryResult.currentPage" 
	class="pagination" 
	previous-text="'‹'"
	next-text="'›'" 
	first-text="'«'" 
	last-text="'»'"
	>
</pagination>

怎样让分页的页码正常显示呢？先后尝试了多种方法，都不行。也想过直接修改bootstrap.css这个文件，但并没有十足的把握，最终无法操作。

后来，在搜到StackOverflow上的一篇问答，基本确定了原因：

原来是Angular UI对Bootstrap 3 的支持并不是很好。不过这篇问答中给出的解决方法，我试了一下，也不行，我也不想去改什么Angular UI 了。

那这样就没办法做什么变通了。

怎么办呢？

仔细想想，bootstrap 2 更新到 bootstrap 3，应该也就是局部的修改，改动不可能很大，于是想到一个方法：

把bootstrap 3中分页部分的内容砍掉，换成bootstrap 2中的分页，行不行呢？

1.  先找到bootstrap 3中的分页：

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
//...略

2. 然后把pagination这部分注释掉：

3.  然后找到bootstrap 2中的分页部分（其实内容差不多），整体复制过来，

好了，分页部分的CSS替换好了，然后刷新页面，页码显示正常了！修改成功！

总结：CSS插件，遇到新版不兼容的问题，不一定要退回旧版，可以考虑直接修改新版不兼容的那部分代码，把它砍掉，换成旧版对应的内容！