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>

Copy

リストグループへのバッジの追加

バッジコンポーネントを任意のリストグループアイテムに追加すると、自動的に右側に配置されます。 <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>

Copy

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

リスト項目の代わりにアンカータグを使用して、リストグループをリンクできます。 <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>

Copy

リストグループへのカスタムコンテンツの追加

上記のリンクリストグループに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>

Copy