資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 Bootstrap 中為列表組新增徽章？
在 Bootstrap 中為列表組新增徽章是建立引人入勝且資訊豐富的使用者介面的一個重要方面。徽章使開發人員能夠顯示重要資訊，例如通知計數、未讀訊息或即將發生的事件以及列表組專案，使使用者能夠快速輕鬆地識別相關內容。雖然在 Bootstrap 中為列表組新增徽章似乎是一項艱鉅的任務，但透過適當的指導，這個過程可以很容易地完成。在本文中，我們將探討在 Bootstrap 中為列表組新增徽章的分步方法，重點介紹 Bootstrap 框架中可用的底層語法和自定義選項。
徽章
徽章是一種符號，是附加到連結上的數字標籤，用於顯示與其關聯的物件數量。徽章的一個例子是通知數字，它顯示了登入特定網站後最近收到的通知數量。徽章能夠透過使用相對字型大小來調整大小以適應相鄰父元件的尺寸。透過將徽章放在列表組旁邊，可以突出顯示該組的顯著特徵，從而使該系列的重要方面更加生動。
Bootstrap 中有八種類型的徽章。它們如下：
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
方法
要在 Bootstrap 中的列表集合中新增徽章，我們將使用 .badge 類與 .list-group-item 類結合使用。
示例
以下程式碼建立一個基於 Bootstrap 的 HTML 網頁。在 head 部分，使用 CDN 透過 link 和 script 標籤匯入 Bootstrap。body 部分包含一個包含 list-group-item <li> 標籤的 list-group <ul> 標籤。每個 <li> 標籤都包含一個 "span" 元素和一個顯示徽章的 "badge" 類。為了展示不同型別的徽章，每個 <li> 元素都使用 "bg-primary"、"bg-secondary"、"bg-success"、"bg-danger"、"bg-warning"、"bg-info"、"bg-light" 或 "bg-dark" 類分配唯一的背景顏色。
<!DOCTYPE html>
<html>
<head>
<title>How to add badge to list group in Bootstrap?</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<h4>How to add badge to list group in Bootstrap?</h4>
<ul class="list-group">
<li class="list-group-item">This is <span class="badge bg-primary">bg-primary</span></li>
<li class="list-group-item">This is <span class="badge bg-secondary">bg-secondary</span></li>
<li class="list-group-item">This is <span class="badge bg-success">bg-success</span></li>
<li class="list-group-item">This is <span class="badge bg-danger">bg-danger</span></li>
<li class="list-group-item">This is <span class="badge bg-warning">bg-warning</span></li>
<li class="list-group-item">This is <span class="badge bg-info">bg-info</span></li>
<li class="list-group-item">This is <span class="badge bg-light">bg-light</span></li>
<li class="list-group-item">This is <span class="badge bg-dark">bg-dark</span></li>
</ul>
</body>
</html>
結論
在本文中，我們簡要介紹了 Bootstrap 中的徽章。我們瞭解了徽章並看到了它的各種型別。我們瞭解瞭如何使用 list-group-item 和 badge 類在 Bootstrap 中的列表組中新增徽章。最後，為列表組新增徽章可以透過提供具有吸引力且易於閱讀格式的附加資訊來顯著改善網站的使用者體驗。
瀏覽量：189
