如何获得MailBox列表像在Gmail中，使用超文本标记语言，CSS或/和引导程序？

<div id="mailbox-list">
  <ul>
    <li>MailBox 1</li>
    <li>MailBox 2</li>
    <li>MailBox 3</li>
    <!-- 其他MailBox -->
  </ul>
</div>

#mailbox-list {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

#mailbox-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#mailbox-list li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

#mailbox-list li:hover {
  background-color: #e6e6e6;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>