If you want to create a simple horizontal navigation bar, you can use the Use If you want to set the tab to be dynamically switchable, you can add it to each link If you want to fade in, you can use the The capsule dynamic tab only needs to put the code in the above example
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
.nav class in each add on the option .nav-item class, adding on each link .nav-link class: 7.21.1. Example ¶
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
Navigation alignment ¶
.justify-content-center class settings navigation center display .justify-content-end class sets the navigation right alignment. 7.21.2. Example ¶
Vertical navigation ¶
.flex-column class is used to create vertical navigation:
7.21.3. Example ¶
<ul class="nav flex-column">
Tabs ¶
.nav-tabs class can convert navigation to tabs. Then for the selected option, use the .active class to mark. 7.21.4. Example ¶
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Activea>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
Capsule navigation ¶
.nav-pills class can set the navigation item to a capsule shape. 7.21.5. Example ¶
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Activea>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
Navigation equal width ¶
.nav-justified class can set the display of navigation items in rows of equal width. 7.21.6. Example ¶
<ul class="nav nav-pills nav-justified">..ul>
<ul class="nav nav-tabs nav-justified">..ul>
Capsule drop-down menu ¶
7.21.7. Example ¶
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Activea>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdowna>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1a>
<a class="dropdown-item" href="#">Link 2a>
<a class="dropdown-item" href="#">Link 3a>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
Tab drop-down menu ¶
7.21.8. Example ¶
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Activea>
li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdowna>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1a>
<a class="dropdown-item" href="#">Link 2a>
<a class="dropdown-item" href="#">Link 3a>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#">Linka>
li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disableda>
li>
ul>
Dynamic tab ¶
data-bs-toggle="tab" property. Then add to the content corresponding to each option .tab-pane class that corresponds to the contents of the tab label u
.tab-content class. .tab-pane add after .fade class: 7.21.9. Example ¶
Capsule dynamic tab ¶
data-bs-toggle property is set to data-bs-toggle="pill" : 7.21.10. Example ¶
Principles, Technologies, and Methods of Geographic Information Systems
102
