1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 列表组( List Group)

Bootstrap - 列表组( List Group)

列表组组件的目的是在列表中呈现复杂和自定义的内容。 要获得基本列表组 -

• 将类.list-group添加到元素“ul”。

• 将class .list-group-item添加到“li”。

以下示例演示了这一点 -

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">24*7 support</li>
   <li class = "list-group-item">Renewal cost per year</li>
</ul>

新页面打开

将徽章添加到列表组

我们可以将徽章组件添加到任何列表组项目中，它将自动定位在右侧。 只需在“li”元素中添加《span class = "badge"》 。 以下示例演示了这一点 -

<ul class = "list-group">
   <li class = "list-group-item">Free Domain Name Registration</li>
   <li class = "list-group-item">Free Window Space hosting</li>
   <li class = "list-group-item">Number of Images</li>
   <li class = "list-group-item">
      <span class = "badge">New</span>
      24*7 support
   </li>
   <li class = "list-group-item">Renewal cost per year</li>
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
</ul>

新页面打开

链接列表组项目

通过使用锚标签而不是列表项，我们可以链接列表组。 我们需要使用

以下示例演示了这一点 -

<a href = "#" class = "list-group-item active">
   Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>

新页面打开

将自定义内容添加到列表组

我们可以将任何HTML内容添加到上面的链接列表组中。 以下示例演示了这一点 -

<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Starter Website Package
      </h4>
   </a>
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">
         24*7 support
      </h4>
      <p class = "list-group-item-text">
         We provide 24*7 support.
      </p>
   </a>
</div>
<div class = "list-group">
   <a href = "#" class = "list-group-item active">
      <h4 class = "list-group-item-heading">
         Business Website Package
      </h4>
   </a>
   <a href = "#" class="list-group-item">
      <h4 class = "list-group-item-heading">
         Free Domain Name Registration
      </h4>
      <p class = "list-group-item-text">
         You will get a free domain registration with website pages.
      </p>
   </a>
   <a href = "#" class = "list-group-item">
      <h4 class = "list-group-item-heading">24*7 support</h4>
      <p class = "list-group-item-text">We provide 24*7 support.</p>
   </a>
</div>

新页面打开