其他代码

漂亮简约bootstrap分页样式

面包多

漂亮简约bootstrap分页样式-创客云
这是两款漂亮的 bootstrap 分页样式。他们在元素 bootstrap3 分页样式的基础上,通过简单的 CSS3 代码来对它进行美化,生成漂亮的分页样式。

使用方法

在页面中引入 bootstrap 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

HTML 结构

这两款分页样式的基本 HTML DOM 结构相同,如下:

  1. <div class="demo" style="min-height: 300px;">
  2.     <div class="container">             
  3.         <div class="row pad-15">
  4.             <div class="col-md-12">
  5.                 <nav class="pagination-outer" aria-label="Page navigation">
  6.                     <ul class="pagination">
  7.                         <li class="page-item">
  8.                             <a href="#" class="page-link" aria-label="Previous">
  9.                                 <span aria-hidden="true">«</span>
  10.                             </a>
  11.                         </li>
  12.                         <li class="page-item"><a class="page-link" href="#">1</a></li>
  13.                         <li class="page-item"><a class="page-link" href="#">2</a></li>
  14.                         <li class="page-item active"><a class="page-link" href="#">3</a></li>
  15.                         <li class="page-item"><a class="page-link" href="#">4</a></li>
  16.                         <li class="page-item"><a class="page-link" href="#">5</a></li>
  17.                         <li class="page-item">
  18.                             <a href="#" class="page-link" aria-label="Next">
  19.                                 <span aria-hidden="true">»</span>
  20.                             </a>
  21.                         </li>
  22.                     </ul>
  23.                 </nav>
  24.             </div>
  25.         </div>
  26.     </div>
  27. </div>

CSS 样式

然后为分别为分页样式添加下面的 CSS 样式。

  1. /* 分页样式一 */
  2. .pagination-outer{ text-align: center; }
  3. .pagination{
  4.     font-family: 'Allerta Stencil', sans-serif;
  5.     display: inline-flex;
  6.     position: relative;
  7. }
  8. .pagination li a.page-link{
  9.     color: #fff;
  10.     background: transparent;
  11.     font-size: 21px;
  12.     line-height: 35px;
  13.     height: 38px;
  14.     width: 38px;
  15.     padding: 0;
  16.     margin: 0 8px;
  17.     border: none;
  18.     position: relative;
  19.     z-index: 1;
  20.     transition: all 0.4s ease 0s;
  21. }
  22. .pagination li.active a.page-link,
  23. .pagination li a.page-link:hover,
  24. .pagination li.active a.page-link:hover{
  25.     color: #fff;
  26.     background-color: transparent;
  27. }
  28. .pagination li a.page-link:before,
  29. .pagination li a.page-link:after{
  30.     content:'';
  31.     background: linear-gradient(225deg,#f857a6,#ff5858);
  32.     height: 100%;
  33.     width: 100%;
  34.     border: 3px solid #fff;
  35.     box-shadow: 0 0 3px #000;
  36.     border-radius: 50%;
  37.     opacity: 1;
  38.     transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  39.     position: absolute;
  40.     top: 50%;
  41.     left: 50%;
  42.     z-index: -1;
  43.     transition: all 0.3s ease-in;
  44. }
  45. .pagination li a.page-link:hover:before,
  46. .pagination li.active a.page-link:before{
  47.     border-radius: 50% 0 50% 50%;
  48. }
  49. .pagination li a.page-link:after{
  50.     background: #fff;
  51.     height: 5px;
  52.     width: 5px;
  53.     border: none;
  54.     box-shadow: 0 0 0 transparent;
  55.     opacity: 0;
  56.     transform: translateX(-50%) translateY(0) rotate(0);
  57.     top: auto;
  58.     bottom: 0;
  59. }
  60. .pagination li a.page-link:hover:after,
  61. .pagination li.active a.page-link:after{
  62.     opacity: 1;
  63.     bottom: 85%;
  64. }
  65. .pagination li:first-child a.page-link:before{
  66.     transform: translateX(-50%) translateY(-50%) rotate(-135deg);
  67. }
  68. .pagination li:first-child a.page-link:hover:before{ border-radius: 50% 0 50% 50%; }
  69. .pagination li:first-child a.page-link:after{
  70.     transform: translateX(0) translateY(-50%);
  71.     top: 50%;
  72.     bottom:auto;
  73.     left: auto;
  74.     right: 0;
  75.  }
  76. .pagination li:first-child a.page-link:hover:after{ right: 80%; }
  77. .pagination li:last-child a.page-link:before{
  78.     transform: translateX(-50%) translateY(-50%) rotate(45deg);
  79. }
  80. .pagination li:last-child a.page-link:hover:before{ border-radius: 50% 0 50% 50%; }
  81. .pagination li:last-child a.page-link:after{
  82.     transform: translateX(0) translateY(-50%);
  83.     bottom:auto;
  84.     top: 50%;
  85.     left: 0;
  86. }
  87. .pagination li:last-child a.page-link:hover:after{ left: 80%; }
  88. @media only screen and (max-width: 480px){
  89.     .pagination{ display: block; }
  90.  
  91.     .pagination li{
  92.         margin-bottom: 10px;
  93.         display: inline-block;
  94.     }
  95. }       
  96.  
  97. /* 分页样式二 */
  98. .pagination-outer{ text-align: center; }
  99. .pagination{
  100.     font-family: 'Rubik', sans-serif;
  101.     display: inline-flex;
  102.     position: relative;
  103. }
  104. .pagination li a.page-link{
  105.     color: #10ac84;
  106.     background-color: transparent;
  107.     font-size: 22px;
  108.     font-weight: 500;
  109.     line-height: 28px;
  110.     height: 40px;
  111.     width: 40px;
  112.     margin: 0 5px 10px;
  113.     border: none;
  114.     border-radius: 0;
  115.     overflow: hidden;
  116.     position: relative;
  117.     transition: all 0.4s ease 0s;
  118. }
  119. .pagination li.active a.page-link,
  120. .pagination li a.page-link:hover,
  121. .pagination li.active a.page-link:hover{
  122.     color: #fff;
  123.     background-color: #10ac84;
  124. }
  125. .pagination li:first-child a.page-link:hover,
  126. .pagination li:last-child a.page-link:hover{
  127.     box-shadow: 0 0 10px rgba(0,0,0,0.9);
  128. }
  129. .pagination li a.page-link:before{
  130.     content: attr(data-hover);
  131.     color: rgba(255,255,255,0.2);
  132.     font-size: 80px;
  133.     font-weight: 700;
  134.     height: 100%;
  135.     width: 100%;
  136.     opacity: 1;
  137.     position: absolute;
  138.     top: 100%;
  139.     left: 0;
  140.     transition: all 0.3s ease 0s;
  141. }
  142. .pagination li a.page-link:hover:before,
  143. .pagination li.active a.page-link:before{
  144.     opacity: 1;
  145.     top: 10px;
  146. }
  147. @media only screen and (max-width: 480px){
  148.     .pagination{ display: block; }
  149.     .pagination li{
  150.         margin-bottom: 10px;
  151.         display: inline-block;
  152.     }
  153. }
(2)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!