Bootstrap 黑色主题分页导航样式

创客云


这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码,将原始的bootstrap分页美化为好看的黑色主题导航样式。

使用方法

在页面中引入bootstrap样式文件。

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

HTML结构

分页导航的HTML结构如下。

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

CSS样式

  1. .pagination-outer{ text-align: center; }
  2. .pagination{
  3.     background: #151515;
  4.     font-family: 'Sniglet', cursive;
  5.     padding: 5px;
  6.     box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.5);
  7.     border-radius: 50px;
  8.     display: inline-flex;
  9.     position: relative;
  10. }
  11. .pagination li a.page-link{
  12.     color: #bdc3c7;
  13.     background-color: #202020;
  14.     font-size: 22px;
  15.     font-weight: 600;
  16.     line-height: 33px;
  17.     height: 45px;
  18.     width: 50px;
  19.     margin: 0 2px 0 0;
  20.     border: 1px solid #202020;
  21.     border-top: 1px solid #353535;
  22.     box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.5);
  23.     border-radius: 0;
  24.     position: relative;
  25.     z-index: 1;
  26.     transition: all 0.3s ease 0s;
  27. }
  28. .pagination li.active a.page-link,
  29. .pagination li a.page-link:hover,
  30. .pagination li.active a.page-link:hover{
  31.     color: #2ecc71;
  32.     background: #151515;
  33.     text-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
  34.     border: 1px solid transparent;
  35.     border-bottom: 1px solid #252525;
  36.     box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.8);
  37. }
  38. .pagination li:first-child a.page-link{ border-radius: 40px 0 0 40px; }
  39. .pagination li:last-child a.page-link{
  40.     margin-right: 0;
  41.     border-radius: 0 40px 40px 0;
  42. }
  43. @media only screen and (max-width: 480px){
  44.     .pagination{
  45.         display: block;
  46.         border-radius: 20px;
  47.     }
  48.     .pagination li{
  49.         margin: 5px 2px;
  50.         display: inline-block;
  51.     }
  52. }
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/46983.html
云模板

发表评论