


This article will introduce to you the usage of the Pagination component in Bootstrap5. I hope it will be helpful to everyone!
[Related recommendation: "bootstrap tutorial"]
1. Simple example
Page navigation is generally used for article list pages, download lists, picture lists, etc. Because there is a lot of data, it is impossible to display it on one page. Generally, page navigation includes previous page, next page, digital page number, etc. The following is a simple example:
<nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">上一页</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一页</a></li> </ul> </nav>
2. Use icons
Use icons or symbols to replace certain paging links. Text.
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
3, disabled and active status
Paging links can be customized according to different situations. Use disabled for links that appear to be unclickable, and active for links that appear to be on the current page.
Although the .disabled class uses pointer-events: none to attempt to disable a's link functionality, the CSS properties have not been standardized and keyboard navigation is not considered. Therefore, you should always add tabindex="-1" on disabled links and use custom JavaScript to completely disable their functionality.
<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>
4. Size
Like larger or smaller pagination? Add pagination-lg or pagination-sm, or use another size.
<nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="..."> <ul class="pagination"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav>
#5. Alignment
The default paging navigation is left aligned. Foreigners are more accustomed to left alignment. We Chinese like to be centered. You can use the flexible box general class Change the alignment of the pagination component. Just add justify-content-center to the ul class. Of course, you can also use justify-content-end to align to the right, although this is rare.
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> <nav aria-label="Page navigation example"> <ul class="pagination justify-content-end"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>
If this article is helpful to you, please remember to like it!
For more programming-related knowledge, please visit: Programming Video! !
The above is the detailed content of A brief discussion on how to use the Pagination component of Bootstrap5. For more information, please follow other related articles on the PHP Chinese website!

The article discusses strategies for staying updated with Bootstrap releases, accessing official documentation, best practices for integration, and community resources for discussion.

Article discusses customizing Bootstrap's appearance and behavior using CSS variables, Sass, custom CSS, JavaScript, and component modifications. It also covers best practices for modifying styles and ensuring responsiveness across devices.

Article discusses key Bootstrap components: grid system, typography, components, and utilities. Focuses on enhancing responsive design and interactive UI creation.

The article discusses methods to override Bootstrap's styles using custom CSS, focusing on creating separate files, using specificity, and best practices for organization.

Article discusses using Bootstrap's grid system for responsive layouts across devices, detailing structure, customization, and testing tools.

The article outlines ways to contribute to Bootstrap, including code submissions, documentation improvements, bug reporting, and community engagement. It provides detailed steps for submitting pull requests and reporting issues.

This article examines the effectiveness of using inline-block for centering images within Bootstrap. It argues that while technically feasible, this method is impractical due to complexities in achieving responsive vertical centering and maintenance

The article discusses sources for Bootstrap templates and themes, both free and premium. It covers customization and lists reputable sites for downloads.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
