7.13. Bootstrap5 badge

发布时间 : 2025-10-25 13:35:30 UTC      

Page Views: 10 views

Image0

Badges (Badges) are mainly used to highlight new or unread items. To use a badge, just set the .badge class plus a color class with a specified meaning, such as .bg-secondary ) add to on the element. Badges can vary according to the size of the parent element:

7.13.1. Example

<h1>test title <span class="badge bg-secondary">Newspan>h1> <h2>test title <span class="badge bg-secondary">Newspan>h2> <h3>test title <span class="badge bg-secondary">Newspan>h3> <h4>test title <span class="badge bg-secondary">Newspan>h4> <h5>test title <span class="badge bg-secondary">Newspan>h5> <h6>test title <span class="badge bg-secondary">Newspan>h6>    

Badges of various color types

Badges of all color types are listed below:

7.13.2. Example

<span class="badge bg-primary">mainspan> <span class="badge bg-secondary">secondaryspan> <span class="badge bg-success">successspan> <span class="badge bg-danger">dangerousspan> <span class="badge bg-warning">warnspan> <span class="badge bg-info">informationspan> <span class="badge bg-light">light colourspan> <span class="badge bg-dark">deep colourspan>    

Pill shape badge

Use .rounded-pill class to set the pill shape badge:

7.13.3. Example

<span class="badge rounded-pill bg-default">defaultspan> <span class="badge rounded-pill bg-primary">mainspan> <span class="badge rounded-pill bg-success">successspan> <span class="badge rounded-pill bg-info">informationspan> <span class="badge rounded-pill bg-warning">warnspan> <span class="badge rounded-pill bg-danger">dangerousspan>    

Insert the badge into the element

The following example embeds a badge into a button:

7.13.4. Example

<button type="button" class="btn btn-primary"> Messages <span class="badge bg-light">4span> button>      
                
                
            
        
        
《地理信息系统原理、技术与方法》  97

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