<ul class="list-group">
  <li class="list-group-item active" aria-current="true">激活的列表项</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
  <li class="list-group-item">列表项 4</li>
  <li class="list-group-item">列表项 5</li>
</ul>

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">禁用的列表项</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
  <li class="list-group-item">列表项 4</li>
  <li class="list-group-item">列表项 5</li>
</ul>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    当前激活的链接项
  </a>
  <a href="#" class="list-group-item list-group-item-action">第二个链接项</a>
  <a href="#" class="list-group-item list-group-item-action">第三个链接项</a>
  <a href="#" class="list-group-item list-group-item-action">第四个链接项</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">禁用的链接项</a>
</div>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    当前激活的按钮
  </button>
  <button type="button" class="list-group-item list-group-item-action">第二个按钮</button>
  <button type="button" class="list-group-item list-group-item-action">第三个按钮</button>
  <button type="button" class="list-group-item list-group-item-action">第四个按钮</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>禁用的按钮</button>
</div>

<ul class="list-group list-group-flush">
  <li class="list-group-item">列表项 1</li>
  <li class="list-group-item">列表项 2</li>
  <li class="list-group-item">列表项 3</li>
  <li class="list-group-item">列表项 4</li>
  <li class="list-group-item">列表项 5</li>
</ul>

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">标题一</div>
      内容一
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">标题二</div>
      内容二
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">标题三</div>
      内容三
    </div>
  </li>
</ol>

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    收件箱
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    已发送
    <span class="badge bg-primary rounded-pill">54</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    草稿箱
    <span class="badge bg-primary rounded-pill">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    垃圾邮件
    <span class="badge bg-primary rounded-pill">99+</span>
  </li>
</ul>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">列表项标题一</h5>
      <small>3天前</small>
    </div>
    <p class="mb-1">这是一些占位文本，表示列表项的内容描述。此内容稍长，以便您了解其外观。</p>
    <small>还有一些小字内容。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">列表项标题二</h5>
      <small class="text-muted">3天前</small>
    </div>
    <p class="mb-1">这是另一个列表项的内容。同样，这里有一些示例文本，用于构建列表项的内容。</p>
    <small class="text-muted">还有一些小字内容。</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">列表项标题三</h5>
      <small class="text-muted">3天前</small>
    </div>
    <p class="mb-1">这是第三个列表项的内容。这里有一些示例文本，用于展示列表项的内容。</p>
    <small class="text-muted">还有一些小字内容。</small>
  </a>
</div>

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">首页</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">个人资料</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">消息</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">设置</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <h5>首页内容</h5>
        <p>这是首页的内容区域...</p>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <h5>个人资料内容</h5>
        <p>这是个人资料的内容区域...</p>
      </div>
      <!-- 更多标签页内容 -->
    </div>
  </div>
</div>

// JavaScript 交互逻辑
const interactiveList = document.getElementById('interactiveList');
const selectedItemDisplay = document.getElementById('selectedItem');
let itemCount = 5;

// 列表项点击事件
interactiveList.addEventListener('click', function(e) {
    if (e.target.classList.contains('list-group-item')) {
        // 移除所有激活状态
        document.querySelectorAll('#interactiveList .list-group-item').forEach(item => {
            item.classList.remove('active');
        });

        // 设置当前项为激活状态
        e.target.classList.add('active');
        selectedItemDisplay.textContent = e.target.textContent;
    }
});

// 添加项
document.getElementById('addItem').addEventListener('click', function() {
    itemCount++;
    const newItem = document.createElement('button');
    newItem.type = 'button';
    newItem.className = 'list-group-item list-group-item-action';
    newItem.textContent = `列表项 ${itemCount}`;
    interactiveList.appendChild(newItem);
});

// 删除选中项
document.getElementById('removeItem').addEventListener('click', function() {
    const activeItem = interactiveList.querySelector('.list-group-item.active');
    if (activeItem) {
        activeItem.remove();
        selectedItemDisplay.textContent = '无';
    }
});

// 清空所有
document.getElementById('clearAll').addEventListener('click', function() {
    interactiveList.innerHTML = '';
    selectedItemDisplay.textContent = '无';
    itemCount = 0;
});