最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
7.18.1. A simple card ¶
We can use Bootstrap5’s .card and .card-body class to create a simple card that can contain header, content, bottom, and various color settings, as shown in the following example:
Bootstrap 4 provides a variety of card background color categories: We can use it on the header element We can give If you want to set the picture as the background, you can use the 
Example ¶
<div class="card"> <div class="card-body">Simple cardsdiv> div>
7.18.2. Head and bottom ¶
.card-header class is used to create the header style of the card .card-footer class is used to create the bottom style of the card: 
Example ¶
<div class="card"> <div class="card-header">headerdiv> <div class="card-body">bodydiv> <div class="card-footer">footerdiv> div>
7.18.3. Multi-color card ¶
.bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark and .bg-light . 
Example ¶
<div class="container"> <h2>Multiple color cardsh2> <div class="card"> <div class="card-body">Basic Carddiv> div> <br> <div class="card bg-primary text-white"> <div class="card-body">Main cardsdiv> div> <br> <div class="card bg-success text-white"> <div class="card-body">Success Carddiv> div> <br> <div class="card bg-info text-white"> <div class="card-body">Information carddiv> div> <br> <div class="card bg-warning text-white"> <div class="card-body">Warning carddiv> div> <br> <div class="card bg-danger text-white"> <div class="card-body">Danger Carddiv> div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Secondary Carddiv> div> <br> <div class="card bg-dark text-white"> <div class="card-body">Black Carddiv> div> <br> <div class="card bg-light text-dark"> <div class="card-body">Light colored cardsdiv> div> div>
7.18.4. Title, text, and link ¶
.card-title class to set the title of the card. .card-body class is used to set the contents of the card body. .card-text class is used to set the card .card-body in the class label, if the last line can remove the bottom margin. .card-link class is used to set the color for links. Example ¶
<div class="card"> <div class="card-body"> <h4 class="card-title">Card titleh4> <p class="card-text">Some example text. Some example text.p> <a href="#" class="card-link">Card linka> <a href="#" class="card-link">Another linka> div> div>
7.18.5. Picture card ¶
add
.card-img-top (the picture is above the text) or .card-img-bottom (the picture is below the text to set the picture card: Example ¶
<div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doeh4> <p class="card-text">Some example text.p> <a href="#" class="btn btn-primary">See Profilea> div> div>
.card-img-overlay class: Example ¶
<div class="card" style="width:500px"> <img class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">John Doeh4> <p class="card-text">Some example text.p> <a href="#" class="btn btn-primary">See Profilea> div> div>