In the process of web page development, if you encounter too much content, you will generally do paging.
Bootstrap 5 can easily achieve the paging effect.
To create a basic paging, you can use the The current page can use the Paging entries can be set to different sizes. You can use tool classes to set the alignment of paging:
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. add on the element
.pagination class. And then in add on the element .page-item class of the < li > element add to the label `` .page-link``class: 7.16.1. Example ¶
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
Current page number status ¶
.active class to highlight: 7.16.2. Example ¶
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item active"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
Unclickable paging links ¶
.disabled class can make the paging link unclickable: 7.16.3. Example ¶
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
Paging display size ¶
.pagination-lg class sets paging entries for large fonts, and .pagination- sm class sets paging entries for small fonts: 7.16.4. Example ¶
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Previousa>li>
<li class="page-item"><a class="page-link" href="#">1a>li>
<li class="page-item"><a class="page-link" href="#">2a>li>
<li class="page-item"><a class="page-link" href="#">3a>li>
<li class="page-item"><a class="page-link" href="#">Nexta>li>
ul>
Alignment of pagination ¶
7.16.5. Example ¶
Bread crumb navigation ¶
.breadcrumb and .breadcrumb-item class is used to set bread crumb navigation: 7.16.6. Example ¶
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photosa>li>
<li class="breadcrumb-item"><a href="#">Summer 2017a>li>
<li class="breadcrumb-item"><a href="#">Italya>li>
<li class="breadcrumb-item active">Romeli>
ul>
Principles, Technologies, and Methods of Geographic Information Systems
102