Bootstrap-list-group

ブートストラップ-リストグループ

リストグループコンポーネントの目的は、複雑でカスタマイズされたコンテンツをリストに表示することです。 基本的なリストグループを取得するには-

• クラス .list-group を要素<ul>に追加します。
• クラス .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>

リストグループアイテムのリンク

リスト項目の代わりにアンカータグを使用して、リストグループをリンクできます。 <ul>要素の代わりに<div>を使用する必要があります。 次の例はこれを示しています-

<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>