布尔玛分页样式

布尔玛分页样式是一种常见的分页样式。它的特点是简洁、美观、易用，常用于各种类型的网站和应用程序中。

样式特点

• 简洁，只显示当前页码和总页数；
• 美观，采用圆角矩形按钮设计，具有更好的视觉效果；
• 易用，支持鼠标点击和键盘箭头操作翻页。

样式示例

下面是一个典型的布尔玛分页样式示例：

<div class="pagination">
  <span class="current-page">1</span>
  <span class="total-pages">of 10</span>
  <a href="#" class="previous-page">&lt;</a>
  <a href="#" class="next-page">&gt;</a>
</div>

其中，current-page用于显示当前页码，total-pages用于显示总页数，previous-page和next-page分别用于向前和向后翻页。

样式实现

布尔玛分页样式可以用CSS和JavaScript实现。

CSS实现

下面是一个简单的CSS代码片段，用于实现布尔玛分页样式：

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.pagination span,
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 5px;
  font-size: 16px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.pagination span.current-page {
  background-color: #007bff;
  color: #fff;
}

.pagination a:hover {
  cursor: pointer;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

JavaScript实现

下面是一个简单的JavaScript代码片段，用于实现布尔玛分页样式的交互操作：

var currentPage = 1;
var totalPages = 10;

document.querySelector('.previous-page').addEventListener('click', function() {
  if (currentPage > 1) {
    currentPage--;
    updatePagination();
  }
});

document.querySelector('.next-page').addEventListener('click', function() {
  if (currentPage < totalPages) {
    currentPage++;
    updatePagination();
  }
});

function updatePagination() {
  document.querySelector('.current-page').innerText = currentPage;
}

其中，currentPage和totalPages分别表示当前页码和总页数，updatePagination()则用于更新分页样式中的页码显示。