链接则是具体的页码或操作按钮，class="page-link"`为分页链接样式。
2. 样式调整
如果需要自定义分页样式，可以在项目中覆盖Bootstrap默认样式或者添加额外的样式规则。例如改变字体大小、颜色、间距等，只需在CSS文件中针对.pagination、.page-item、.page-link等选择器进行修改即可。
三、结合JavaScript实现动态分页
除了静态展示分页外，还可以借助JavaScript实现更灵活的功能。这里以jQuery为例：
```html
// 模拟数据，实际应从服务器获取
const data = Array.from({length: 50}, (_, i) => `Item ${i + 1}`);
const pageSize = 10;
let currentPage = 1;
function renderPagination(totalPages) {
const paginationHtml = [];
if (currentPage > 1) {
paginationHtml.push(`
Previous
`);
}
for (let i = 1; i <= totalPages; i++) {
paginationHtml.push(`
${i}
`);
}
if (currentPage < totalPages) {
paginationHtml.push(`
Next
`);
}
$('#pagination').html(paginationHtml.join(''));
}
function renderContent() {
const start = (currentPage - 1) * pageSize;
const end = start + pageSize;
const pageData = data.slice(start, end);
$('#content').html(pageData.map(item => `
${item}
`).join(''));
}
$(document).ready(function () {
let totalPages = Math.ceil(data.length / pageSize);
renderPagination(totalPages);
renderContent();
$(document).on('click', '.pagination .page-link', function (e) {
e.preventDefault();
currentPage = parseInt($(this).data('page'));
renderPagination(totalPages);
renderContent();
});
});
``
在这个示例中，模拟了一些数据存储在数组里，在实际应用中应该通过AJAX请求从服务器端获取。然后定义了每页显示的数据量pageSize，以及当前页码currentPage。renderPagination()函数负责根据总页数生成分页HTML结构，其中包含了“上一页”、“下一页”以及各页码按钮，并且会根据当前页码设置高亮状态。renderContent()`函数则根据当前页码计算出要显示的数据范围，并将其渲染到页面上。最后利用jQuery监听分页项的点击事件，更新当前页码并重新渲染分页和内容。
以上就是关于Bootstrap分页组件的两种思路，一种是纯前端静态展示，另一种是结合后端数据源与JavaScript实现动态交互式的分页。根据实际需求可以选择合适的方式进行开发。
(牛站网络)
