最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
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 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 ¶
文章链接
：
7.21. Bootstrap5 navigation