Most of the underlying list groups are unordered.

To create a list group, you can use the By adding To create a linked list item, you can replace Use We can put The color of list items can be set through the following columns:
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
.list-group class, in add on the element .list-group-item class: 7.17.1. Example ¶
<ul class="list-group">
<li class="list-group-item">Item 1li>
<li class="list-group-item">Item 2li>
<li class="list-group-item">Item 3li>
ul>
List items for active statu ¶
.active class to set the list items for the active state 7.17.2. Example ¶
<ul class="list-group">
<li class="list-group-item active">Activate list itemsli>
<li class="list-group-item">Item 2li>
<li class="list-group-item">Item 3li>
ul>
Disabled list items ¶
.disabled class is used to set disabled list items: 7.17.3. Example ¶
<ul class="list-group">
<li class="list-group-item disabled">Disabled itemsli>
<li class="list-group-item">Item 2li>
<li class="list-group-item">Item 3li>
ul>
Link list item ¶
with
with .If you want the mouse hover to display a gray background, add the .list-group-item-action : 7.17.4. Example ¶
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Item 1a>
<a href="#" class="list-group-item list-group-item-action">Item 2a>
<a href="#" class="list-group-item list-group-item-action">Item 3a>
div>
Remove the list border ¶
.list-group-flush class to remove the borders and fillets of the list 7.17.5. Example ¶
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1li>
<li class="list-group-item">Item 2li>
<li class="list-group-item">Item 3li>
<li class="list-group-item">Item 4li>
ul>
Horizontal list group ¶
.list-group-horizontal class to the .list-group class to create a horizontal list group: 7.17.6. Example ¶
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Item 1li>
<li class="list-group-item">Item 2li>
<li class="list-group-item">Item 3li>
<li class="list-group-item">Item 4li>
ul>
Multiple color list items ¶
.list-group-item-success , list-group-item- secondary , list-group-item-info , list-group-item-warning , .list- group-item-danger , list-group-item-dark and list-group-item-light : 7.17.7. Example ¶
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success List Itemsli>
<li class="list-group-item list-group-item-secondary">Secondary list itemsli>
<li class="list-group-item list-group-item-info">Information list itemsli>
<li class="list-group-item list-group-item-warning">Warning List Itemli>
<li class="list-group-item list-group-item-danger">Danger List Itemsli>
<li class="list-group-item list-group-item-primary">Main List Itemsli>
<li class="list-group-item list-group-item-dark">Dark gray list itemsli>
<li class="list-group-item list-group-item-light">Light List Itemsli>
ul>
Linked multi-color list items ¶
7.17.8. Example ¶
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Activate list itemsa>
<a href="#" class="list-group-item list-group-item-success">Success List Itemsa>
<a href="#" class="list-group-item list-group-item-secondary">Secondary list itemsa>
<a href="#" class="list-group-item list-group-item-info">Information list itemsa>
<a href="#" class="list-group-item list-group-item-warning">Warning List Itema>
<a href="#" class="list-group-item list-group-item-danger">Danger List Itemsa>
<a href="#" class="list-group-item list-group-item-primary">Main List Itemsa>
<a href="#" class="list-group-item list-group-item-dark">Dark gray list itemsa>
<a href="#" class="list-group-item list-group-item-light">Light List Itemsa>
div>
List group case ¶
7.17.9. Example ¶
Principles, Technologies, and Methods of Geographic Information Systems
102