bootstrap 分页 bootstrap 分页学习笔记

bootstrap 分页学习笔记

博客分类：

 
• bootstrap

 

文章参考 http://v3.bootcss.com/components/#pagination

默认分页代码

Html代码  

1. <nav>  
2.   <ul class="pagination">  
3.     <li>  
4.       <a href="#" aria-label="Previous">  
5.         <span aria-hidden="true">&laquo;</span>  
6.       </a>  
7.     </li>  
8.     <li><a href="#">1</a></li>  
9.     <li><a href="#">2</a></li>  
10.     <li><a href="#">3</a></li>  
11.     <li><a href="#">4</a></li>  
12.     <li><a href="#">5</a></li>  
13.     <li>  
14.       <a href="#" aria-label="Next">  
15.         <span aria-hidden="true">&raquo;</span>  
16.       </a>  
17.     </li>  
18.   </ul>  
19. </nav>  

禁用 和 激活 分页按钮

Java代码  

1. <nav>  
2.   <ul class="pagination">  
3.     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>  
4.     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>  
5.     ...  
6.   </ul>  
7. </nav>  

分页按钮的尺寸

Html代码  

1. <nav><ul class="pagination pagination-lg">...</ul></nav>  
2. <nav><ul class="pagination">...</ul></nav>  
3. <nav><ul class="pagination pagination-sm">...</ul></nav>  

分页demo

Html代码  

1. <style>  
2. /********跳转页面的按钮样式*********/  
3.     .page_jump{  
4.         background-color: #fff;  
5.         border: 1px solid #ddd;  
6.         color: #565656;  
7.         line-height: 1.42857;  
8.         margin-left: -1px;  
9.         padding: 6px 12px;  
10.         position: relative;  
11.         text-decoration: none;  
12.     }  
13.   
14.     /********修改页控件的字体颜色*********/  
15.     .pagination > li,.pagination > li > a, .pagination > li > span {  
16.         color: #999999;  
17.     }  
18.   
19.     /********当前页被选中*********/  
20.     .pagination > li > a.active {  
21.         background: #fdd000;  
22.         color: #e5005a;  
23.         border: 1px solid #fdd000;  
24.     }  
25.   
26. </style>  
27.   
28. <!-- 分页 -->  
29. <div class="sqh_img_center" style="width: 550px;">  
30.     <nav>  
31.         <ul class="pagination">  
32.             <li>  
33.                 <a href="#" aria-label="Previous">  
34.                     <span aria-hidden="true">&laquo;</span>上一页  
35.                 </a>  
36.             </li>  
37.             <li><a href="#" class="active">1</a></li>  
38.             <li><a href="#">2</a></li>  
39.             <li><a href="#" >3</a></li>  
40.             <li class="active"><a href="#">4</a></li>  
41.             <li><a href="#">5</a></li>  
42.             <li>  
43.                 <a href="#" aria-label="Next">  
44.                     下一页<span aria-hidden="true">&raquo;</span>  
45.                 </a>  
46.             </li>  
47.             <li class="margin_left_10">  
48.                 共3页，到第  
49.             </li>  
50.             <li style=" margin: 20px 10px;" >  
51.                <input class=" text-center" type="text" style="width: 30px; height:31px;margin-right: 10px; border: 1px solid #ddd;">页  
52.             </li>  
53.             <li style=" margin: 20px 0;" class="margin_left_10">  
54.                 <button class="page_jump">确定</button>  
55.             </li>  
56.         </ul>  
57.     </nav>  
58. </div>  

 

扫描二维码关注公众号，回复： 302708 查看本文章

---

 翻页

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li><a href="#">Previous</a></li>  
4.     <li><a href="#">Next</a></li>  
5.   </ul>  
6. </nav>  

 对齐链接

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>  
4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>  
5.   </ul>  
6. </nav>  

 禁用状态

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>  
4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>  
5.   </ul>  
6. </nav>  

文章参考 http://v3.bootcss.com/components/#pagination

默认分页代码

Html代码  

1. <nav>  
2.   <ul class="pagination">  
3.     <li>  
4.       <a href="#" aria-label="Previous">  
5.         <span aria-hidden="true">&laquo;</span>  
6.       </a>  
7.     </li>  
8.     <li><a href="#">1</a></li>  
9.     <li><a href="#">2</a></li>  
10.     <li><a href="#">3</a></li>  
11.     <li><a href="#">4</a></li>  
12.     <li><a href="#">5</a></li>  
13.     <li>  
14.       <a href="#" aria-label="Next">  
15.         <span aria-hidden="true">&raquo;</span>  
16.       </a>  
17.     </li>  
18.   </ul>  
19. </nav>  

禁用 和 激活 分页按钮

Java代码  

1. <nav>  
2.   <ul class="pagination">  
3.     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>  
4.     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>  
5.     ...  
6.   </ul>  
7. </nav>  

分页按钮的尺寸

Html代码  

1. <nav><ul class="pagination pagination-lg">...</ul></nav>  
2. <nav><ul class="pagination">...</ul></nav>  
3. <nav><ul class="pagination pagination-sm">...</ul></nav>  

分页demo

Html代码  

1. <style>  
2. /********跳转页面的按钮样式*********/  
3.     .page_jump{  
4.         background-color: #fff;  
5.         border: 1px solid #ddd;  
6.         color: #565656;  
7.         line-height: 1.42857;  
8.         margin-left: -1px;  
9.         padding: 6px 12px;  
10.         position: relative;  
11.         text-decoration: none;  
12.     }  
13.   
14.     /********修改页控件的字体颜色*********/  
15.     .pagination > li,.pagination > li > a, .pagination > li > span {  
16.         color: #999999;  
17.     }  
18.   
19.     /********当前页被选中*********/  
20.     .pagination > li > a.active {  
21.         background: #fdd000;  
22.         color: #e5005a;  
23.         border: 1px solid #fdd000;  
24.     }  
25.   
26. </style>  
27.   
28. <!-- 分页 -->  
29. <div class="sqh_img_center" style="width: 550px;">  
30.     <nav>  
31.         <ul class="pagination">  
32.             <li>  
33.                 <a href="#" aria-label="Previous">  
34.                     <span aria-hidden="true">&laquo;</span>上一页  
35.                 </a>  
36.             </li>  
37.             <li><a href="#" class="active">1</a></li>  
38.             <li><a href="#">2</a></li>  
39.             <li><a href="#" >3</a></li>  
40.             <li class="active"><a href="#">4</a></li>  
41.             <li><a href="#">5</a></li>  
42.             <li>  
43.                 <a href="#" aria-label="Next">  
44.                     下一页<span aria-hidden="true">&raquo;</span>  
45.                 </a>  
46.             </li>  
47.             <li class="margin_left_10">  
48.                 共3页，到第  
49.             </li>  
50.             <li style=" margin: 20px 10px;" >  
51.                <input class=" text-center" type="text" style="width: 30px; height:31px;margin-right: 10px; border: 1px solid #ddd;">页  
52.             </li>  
53.             <li style=" margin: 20px 0;" class="margin_left_10">  
54.                 <button class="page_jump">确定</button>  
55.             </li>  
56.         </ul>  
57.     </nav>  
58. </div>  

 

---

 翻页

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li><a href="#">Previous</a></li>  
4.     <li><a href="#">Next</a></li>  
5.   </ul>  
6. </nav>  

 对齐链接

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>  
4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>  
5.   </ul>  
6. </nav>  

 禁用状态

Html代码  

1. <nav>  
2.   <ul class="pager">  
3.     <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>  
4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>  
5.   </ul>  
6. </nav>