Bootstrap4（13）： 列表组

一、创建列表组

大部分基础列表组都是无序的。

要创建列表组，可以在

元素上添加 .list-group 类, 在
• 元素上添加 .list-group-item 类:

  <ul class="list-group">
    <li class="list-group-item">First itemli>
    <li class="list-group-item">Second itemli>
    <li class="list-group-item">Third itemli>
  ul>

  尝试一下 »

  

  二、激活状态的列表项

  通过添加 .active 类来设置激活状态的列表项：

  <ul class="list-group">
    <li class="list-group-item active">Active itemli>
    <li class="list-group-item">Second itemli>
    <li class="list-group-item">Third itemli>
  ul>

  尝试一下 »

  

  三、禁用的列表项

  .disabled 类用于设置禁用的列表项:

  <ul class="list-group">
    <li class="list-group-item disabled">Disabled itemli>
    <li class="list-group-item">Second itemli>
    <li class="list-group-item">Third itemli>
  ul>

  尝试一下 »

  

  四、链接列表项

  要创建一个链接的列表项，可以将

  替换为
  ， 替换

  。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:

  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">First itema>
    <a href="#" class="list-group-item list-group-item-action">Second itema>
    <a href="#" class="list-group-item list-group-item-action">Third itema>
  div>

  尝试一下 »

  

  五、多种颜色列表项

  列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

  <ul class="list-group">
    <li class="list-group-item list-group-item-success">成功列表项li>
    <li class="list-group-item list-group-item-secondary">次要列表项li>
    <li class="list-group-item list-group-item-info">信息列表项li>
    <li class="list-group-item list-group-item-warning">警告列表项li>
    <li class="list-group-item list-group-item-danger">危险列表项li>
    <li class="list-group-item list-group-item-primary">主要列表项li>
    <li class="list-group-item list-group-item-dark">深灰色列表项li>
    <li class="list-group-item list-group-item-light">浅色列表项li>
  ul>

  尝试一下 »

  

  1、链接的多种颜色列表项

  <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">激活列表项a>
      <a href="#" class="list-group-item list-group-item-success">成功列表项a>
      <a href="#" class="list-group-item list-group-item-secondary">次要列表项a>
      <a href="#" class="list-group-item list-group-item-info">信息列表项a>
      <a href="#" class="list-group-item list-group-item-warning">警告列表项a>
      <a href="#" class="list-group-item list-group-item-danger">危险列表项a>
      <a href="#" class="list-group-item list-group-item-primary">主要列表项a>
      <a href="#" class="list-group-item list-group-item-dark">深灰色列表项a>
      <a href="#" class="list-group-item list-group-item-light">浅色列表项a>
  div>

  尝试一下 »